DEV Community
·
如何在Next.js应用中从Contentful获取和展示博客文章
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
本文介绍了如何在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字段设置动态路由。
❓
延伸问答
如何在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传递给页面组件。
🏷️
标签
➡️
