DEV Community
·
如何在Next.js应用中从Contentful获取和展示博客文章
内容提要
本文介绍了如何在Next.js应用中使用服务器端渲染（SSR）从Contentful CMS获取和展示博客文章。通过设置Contentful并创建文章类型，用户可以在/pages/articles/index.js页面展示文章标题和发布日期。SSR相较于客户端渲染（CSR）具有更好的安全性和SEO效果，文章还指导用户创建动态路由以显示单个文章页面。
关键要点
-
介绍如何在Next.js应用中使用服务器端渲染（SSR）从Contentful CMS获取和展示博客文章。
-
设置Contentful并创建文章类型，以便在/pages/articles/index.js页面展示文章标题和发布日期。
-
SSR相较于客户端渲染（CSR）具有更好的安全性和SEO效果。
-
通过Contentful提供的端点获取文章数据，并在页面上渲染。
-
使用SSR时，数据获取在服务器端进行，只有请求的数据发送到客户端。
-
getServerSideProps函数用于在服务器端获取文章，减少发送到客户端的数据量。
-
格式化日期为DD/MM/YYYY格式，确保客户端接收到正确格式的日期。
-
展示获取的文章列表，包括标题和发布日期。
-
下一步是为单个文章创建动态页面，使用Contentful的slug字段设置动态路由。
延伸解读
服务器端渲染的优势
使用服务器端渲染（SSR）可以有效提高应用的安全性和SEO效果。与客户端渲染（CSR）相比，SSR只将请求的数据发送到客户端，避免了所有文章数据暴露在浏览器中，从而降低了安全风险。此外，SSR能让搜索引擎更好地抓取内容，有助于提升网站的可见性。
数据格式化的重要性
在获取文章数据时，确保日期格式正确至关重要。文章中提到将日期格式化为DD/MM/YYYY格式，这不仅能避免客户端和服务器之间的内容不匹配，还能提升用户体验。正确的日期格式能让读者更清晰地了解文章的发布时间。
动态路由的下一步
文章提到的动态路由设置是实现更复杂功能的基础。通过使用Contentful的slug字段，可以为每篇文章创建独立的页面。这一过程将提升用户的浏览体验，使他们能够方便地访问特定文章，进一步增强网站的互动性和内容的可达性。
延伸问答
如何在Next.js中从Contentful获取博客文章？
可以使用服务器端渲染（SSR）通过Contentful提供的端点获取文章数据，并在/pages/articles/index.js页面展示。
为什么选择服务器端渲染（SSR）而不是客户端渲染（CSR）？
SSR相较于CSR具有更好的安全性和SEO效果，因为数据在服务器端获取，减少了暴露给客户端的数据量。
如何格式化从Contentful获取的日期？
在服务器端使用JavaScript将日期格式化为DD/MM/YYYY格式，以确保客户端接收到正确格式的日期。
如何在Next.js中展示获取的文章列表？
在ArticlesPage组件中，通过遍历文章数组，将每篇文章的标题和发布日期渲染为列表项。
如何创建动态路由以显示单个文章页面？
需要使用Contentful的slug字段设置动态路由，以便用户点击文章标题后能访问到单个文章页面。
getServerSideProps函数的作用是什么？
getServerSideProps函数用于在服务器端获取文章数据，并将所需数据作为props传递给页面组件。
