Open SUNYIMIN opened 4 years ago
为什么要做服务端渲染： react的核心是数据驱动，导致了react项目的页面只有在js代码执行完毕，并且拿到了数据之后，才会渲染出正确的页面，从而导致项目打开时会出现一段时间的白屏，并且对SEO很不友好，服务端渲染主要为了解决这两个问题 如何做： 在做服务端渲染前，先说下服务端渲染和同构的区别，服务端渲染是一种实现，同构是一种思想，核心是客户端和服务端代码的复用。在做服务端渲染时，必须遵循同构原则。 首先需要一个node服务用来代理所有的客户端请求，并在返回数据前进行服务端模版的封装。 然后在工程化打包客户端代码时，需要打包两份代码，一份供服务端同构使用（代码需要特殊处理） 在服务端接收到请求客户端请求时，根据请求的URL，使用 renderToString 方法来生成像对应的组件代码，再将生成的组件代码填充到html模版中，返回给服务端。从而当客户端接受到数据时，就已经时包含了数据及内容的html，直接渲染出页面。 此时虽然已经可以直接渲染出页面，但仍需要解决数据流但同步问题，因为服务端生成的 redux 数据 store 并不能同步到客户端。处理方法，将服务端 store 内容读取出来，并设置到全局变量上，在客户端进行redux初始化时进行赋值。 SEO的优化则通过 react-helmet 插件实现 此外还有诸如防止客户端重复渲染页面等细节问题需要处理
为什么要做服务端渲染： react的核心是数据驱动，导致了react项目的页面只有在js代码执行完毕，并且拿到了数据之后，才会渲染出正确的页面，从而导致项目打开时会出现一段时间的白屏，并且对SEO很不友好，服务端渲染主要为了解决这两个问题 如何做： 在做服务端渲染前，先说下服务端渲染和同构的区别，服务端渲染是一种实现，同构是一种思想，核心是客户端和服务端代码的复用。在做服务端渲染时，必须遵循同构原则。 首先需要一个node服务用来代理所有的客户端请求，并在返回数据前进行服务端模版的封装。 然后在工程化打包客户端代码时，需要打包两份代码，一份供服务端同构使用（代码需要特殊处理） 在服务端接收到请求客户端请求时，根据请求的URL，使用 renderToString 方法来生成像对应的组件代码，再将生成的组件代码填充到html模版中，返回给服务端。从而当客户端接受到数据时，就已经时包含了数据及内容的html，直接渲染出页面。 此时虽然已经可以直接渲染出页面，但仍需要解决数据流但同步问题，因为服务端生成的 redux 数据 store 并不能同步到客户端。处理方法，将服务端 store 内容读取出来，并设置到全局变量上，在客户端进行redux初始化时进行赋值。 SEO的优化则通过 react-helmet 插件实现 此外还有诸如防止客户端重复渲染页面等细节问题需要处理