学习怎么应用服务端渲染

无需加好友免费技术支持

创作者：Craig Bucklere全文：Build a Blog with React and Next.js（sitepoint） 篇幅：2500 字 (非直接翻译)阅读文章: 5min

小伙伴们好，在《动手练习》中应用 React 和 Next.js 做一个简单博客网站(上)和 出手训练，应用 React 和 Next.js 在这里两篇文章中，我们一起实现了一个简单的博客网站(中) MakeDown 博客网站的文件是具体内容页源，学习培训动态路由（Dynamic Routes）、Stat网络资源 Generation 本文学习怎么应用服务端渲染基本知识与应用。（Server-side Rendering）、客户端渲染（Client-side Rendering）最终，使我们谈一谈怎样编译程序项目及布署网址。

服务端渲染（SSR）产生在每一个页面要求中，其相关知识逻辑性，如 NodeJs 数据请求移交服务端，再将具体内容展现给浏览客户。因而，根据该方法，您可以做一些繁杂的领域模型，比如，每一个客户在成功登陆账号展现不同类型的文章。

在《动手练习》中应用 React 和 Next.js 在本文中，大家用了一个简单的博客网站（中）getStaticProps() 此方法在工程编译过程中（build）解决形成 MD 动态路由有关逻辑性。假如我们想应用服务项目3D渲染 getServerSideProps() 网络服务器在页面要求时实行此函数公式逻辑性，进行数据渲染。

在这儿，我们应该完成一个简单的作用 about.js 这一页面，请一个笑话网站API服务项目(就以服务端的方式规定数据信息，最终在数据处理方法结束后展现给客户。即日启程，使我们逐渐完成它。

1、现在我们 /pages/about.js 页面里加上 getServerSideProps() 大家在此方法中应用函数公式 node-fetch 控制模块，获得 API 数据信息后，根据 props 根据组件特性传送返回数据信息(请参阅第二点的有关编码)，举例编码如下所示:

下面，使我们撰写组件 JSX 接受一部分 getServerSideProps() 回到数据库的实例编码如下所示

你可能会留意到以上编码早已用了 styled JSX 词法加上 CSS 款式。

在这儿，服务端渲染作用进行，我们可以通过 npm run dev 重新启动下 next.js 点一下电脑浏览器里的网络服务器 如图所示：

Next.js 编译程序的时间段（build time）在服务端进行页面要求或页面请求时 React 组件的3D渲染逻辑性，但是有些机器能交到手机客户端电脑浏览器，都是官方网手机客户端激话 （client-side hydration 不知道该怎么汉语翻译，临时那么叫吧，借用vue比如，我们应该完成黑喑和白天模式间的转换，接下来我们可以用它 React.useEffect() 该钩处理函数。

每个人要特别注意，在服务端，有一个关键点应注意，在服务端并没有 window 如下所示段编码所显示，这一高层目标在实施的时候会有不正确提示:

为了能修补这种情况，我们能取值初值null。

最先，大家新创建一个 components/themetoggle.js 黑喑和大白天访问方式的转换组件在这儿应用 useEffect() 该钩函数公式完成其逻辑性，举例编码如下所示：

因为服务端无法访问手机客户端方式的初值，首先我们把它复位为null，随后当组件取得成功载入到手机客户端时，大家使用这些 useEffect() 黑喑和白天模式的思路解决是钩子函数。你可能会留意到我独立列举了这一组件 CSS 文档，实际源码，您可点击文章内容结尾阅读文章初始连接，在工程的一体化源码中寻找对应的CSS连接。

2.最终，大家了这些组件 components/header.js 的