반응 서버 렌더링 구현과 관련된 문제를 자세히 설명하십시오.

이 글은 주로 React Server Rendering의 최소 구현에 대한 자세한 설명을 처음부터 소개하고 참고용으로 제공합니다.

머리말

최근에 Koa를 작성하면서 생각한 것은, 제가 만든 코드의 일부는 API를 제공하고 일부는 SSR을 지원한다면 어떻게 작성해야 할까요? (두 개의 서비스로 분할하고 싶지 않다면)
그리고 최근에 작성한 nuxt 등의 프로젝트에서도 일부 서버사이드 렌더링을 사용했고, 다음 프로젝트에서도 작업한 것이 사실입니다. 개발 경험은 매우 친절하지만, 구체적으로 어떻게 달성되었는지 생각해 본 적이 있나요?

진실을 추구하고 실용적인 태도에 맞춰 나는 React를 연구 대상으로 선택했습니다(주로 Vue가 너무 많이 작성되어 역겹기 때문입니다). 그러면 나는 간단히 React 서버 측 렌더링 데모를 작성하겠습니다. 최소 비용

사용 우리가 도달한 기술 스택은

react 16 + webpack3 + koa2

로 서버 측 렌더링을 어떻게 구현하는지 살펴보겠습니다.

서버사이드 렌더링을 사용하는 이유

장점

두 가지에 불과합니다

1. SEO 친화적

2. 첫 번째 화면 렌더링 속도를 높이고 흰색 화면 시간을 줄입니다

그래서 문제가 뭔가요? SEO

한마디로 말하면, 현재 우리가 구축하는 대부분의 웹사이트는 모든 페이지와 데이터가 ajax에서 나옵니다. 다 비어 있는 것 같나요? 그렇다면 귀하의 웹사이트에 포함되는 무게와 효과가 좋다고 생각하시나요, 아니면 나쁘다고 생각하시나요?

SEO 최적화의 핵심은 다음 내용에도 설명되어 있습니다.

다음은 핵심 사항입니다!

서버가 콘텐츠가 포함된 HTML을 우리에게 반환하도록 하세요. 이벤트가 발생하면 브라우저는 마운트를 위해 이를 다시 렌더링합니다.

koa 환경을 구축하세요

새 ssr 프로젝트를 만들고 프로젝트에서 npm을 초기화하세요

mkdir ssr && cd ssr
npm init

다음 코드는 node 환경에서 지원하지 않는 import jsx 등의 구문을 사용했기 때문에 babel을 구성해야 합니다

현재 프로젝트에 app.js, index.js 파일을 새로 생성한 후

babel의 진입 , index.js 코드는 다음과 같습니다

require('babel-core/register')()

require('babel-polyfill')
require('./app')

프로젝트 입구인 app.js 코드는 다음과 같습니다

import Koa from 'koa'
const app = new Koa()

// response
app.use((ctx) => {
 ctx.body = 'Hello Koa'
})

app.listen(3000)
console.log("系统启动，端口：3000")

루트 디렉토리에 새로운 .babelrc 파일을 생성

내용은 다음과 같습니다

{
 "presets": ["react", "env"]
}

위에 필요한 종속성을 설치합니다

npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-dev
npm i koa --save

시작 스크립트를 구성합니다

package.json

"scripts": {
 "dev": "nodemon index.js",
}

여기에서 npm run dev를 실행하고 localhost:3000을 엽니다.

안녕하세요 Koa가 표시됩니다

서비스를 시작하는 것이 매우 간단합니까

React 설치

cnpm install react react-dom --save

루트 디렉터리에 새 앱 폴더를 생성하고, 그 폴더에 새 main.js를 생성합니다

main.js 코드는 다음과 같습니다

import React from 'react'

export default class Home extends React.Component {
 render () {
  return <p>hello world</p>
 }
}

이전 server.js를 수정

import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import App from './app/main'

const app = new Koa()

// response
app.use(ctx => {
 let str = renderToString(<App />)

 ctx.body = str
})

app.listen(3000)

console.log(&#39;系统启动，端口：8080&#39;)

에서 이번에는 npm run dev

화면에 hello world가 나타나는 것을 볼 수 있습니다

Chrome 개발자 도구를 열어 요청을 확인하세요.

가장 간단한 반응 구성 요소는 str이 되어 전달됩니다.

여기서 메소드를 사용합니다. :

renderToString – 실제로 구성 요소를 문자열로 렌더링합니다.

지금까지 구성 요소에 이벤트 및 기타 대화형 동작을 추가하지 않았습니다. 다음으로 시도해 보겠습니다.

main.js의 코드를 수정하세요

import React from 'react'

export default class Home extends React.Component {
 render () {
  return <p onClick={() => window.alert(123)}>hello world</p>
 }
}

Refresh. 우리 페이지는 또 아무것도 없나요?

를 사용하세요. 그 이유는 백엔드가 구성 요소를 html 문자열로만 렌더링할 수 있고 이벤트 바인딩 및 기타 작업은 브라우저 측에서 수행되어야 하기 때문입니다.

그러면 이벤트를 어떻게 바인딩합니까? ?

그러면 서버가 html 문자열을 렌더링하므로 이벤트를 마운트하는 방법은 브라우저에서 한 번 다시 렌더링하는 것이라고 추측할 수 있습니다.

그냥 하세요

웹팩 준비

새 웹팩 만들기 루트 디렉토리 아래의 .config.js

다음은 webpack.config.js의 내용입니다:

var path = require('path')
var webpack = require('webpack')

module.exports = {
 entry: {
  main: './app/index.js'
 },
 output: {
  filename: '[name].js',
  path: path.join(__dirname, 'public'),
  publicPath: '/'
 },
 resolve: {
  extensions: ['.js', '.jsx']
 },
 module: {
  loaders: [
   {test: /\.jsx?$/,
    loaders: ['babel-loader'],
   }
  ]
 }
}

위 구성은 항목을 app/index.js 파일로 설정합니다

그런 다음 하나를 생성합니다

다음 app/index.js의 코드는 다음과 같습니다.

import Demo from './main'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(<Demo />, document.getElementById(&#39;root&#39;))

브라우저 렌더링을 위해서는 루트 컴포넌트를 dom 노드에 마운트해야 하기 때문에 리액트 코드에 대한 입구를 설정했습니다

이번에 문제가 있습니다. 노드 환경에 문서 객체가 존재하지 않는데 어떻게 해결해야 할까요?

존재하지 않나요? 존재하지 않으면 필요하지 않습니다. SSR의 핵심은 요청된 URL에 특정 HTML 콘텐츠를 반환하는 것입니다. 그런 다음 루트 구성 요소를 renderToString

에 직접 반환합니다.

아래 수정 우리의 서비스 코드는 코드가 서버 렌더링을 지원하도록 허용합니다

몇 가지 종속성 추가

cnpm i --save koa-static koa-views ejs

1. koa-static: 정적 파일 처리를 위한 미들웨어

2. koa-views: 템플릿 구성을 위한 미들웨어

3. ejs: 템플릿 엔진

server.js의 코드를 수정하세요

import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import views from 'koa-views'
import path from 'path'

import Demo from './app/main'
const app = new Koa()
// 将/public文件夹设置为静态路径
app.use(require('koa-static')(__dirname + '/public'))
// 将ejs设置为我们的模板引擎
app.use(views(path.resolve(__dirname, './views'), { map: { html: 'ejs' } }))

// response
app.use(async ctx => {
 let str = renderToString(<Demo />)
 await ctx.render(&#39;index&#39;, {
  root: str
 })
})

app.listen(3000)

console.log(&#39;系统启动，端口：8080&#39;)

아래에서 렌더링 템플릿을 만드세요

views 폴더를 만드세요

새 index.html을 만드세요:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <base href="/client" rel="external nofollow" >
</head>
<body>
  <p id="root"><%- root %></p>
  <script src="/main.js"></script>
</body>
</html>

몇 가지 변수를 넣을 수 있습니다 이 는 나중에 renderToString 결과가 배치될 위치입니다.

/main.js는 코드를 직접 테스트해 보겠습니다. 내부

新增：

 "scripts": {
  "dev": "nodemon index.js",
  "build": "webpack"
 },

2. 运行 npm run build， 构建出我们的react代码

3. npm run dev

点击一下代码，是不是会 alert(123)

 tada 撒花，恭喜你，一个最简单服务器渲染就已经完成

到这里核心的思想就都已经讲完了，总结来说就下面三点：

1. 起一个node服务

2. 把react 根组件 renderToString渲染成字符串一起返回前端

3. 前端再重新render一次

原理就是这么简单

但是具体开发的时候还会有各种各样的需求，比如：

1. 不可能我每次改完代码都重新构建看效果吧 => 需要 实时构建

2. create-react-app 都是热更新，你还要刷新是不是太蠢了 => 需要支持热更新

3. 其他一些配套的周边，如： react-router, redux 或者mobx怎么支持呢 => 需要完善的生态

.etc

这些问题都是用完 官方脚手架之后就回不去了的，所以更多的配置可以参考下面的repo（是一个工具链完善的最小实现），欢迎提PR

GitHub - ws456999/koa-react-ssr-starter: to understand && to explain how react ssr works

目前你可以在里面找到 react + react-router + mobx + postcss + 热更新的配置，除了react-router的配置有些差别，其他都跟client端差别不大

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现页面跳转后返回原页面初始位置

使用vue-router如何设置每个页面的title方法

如何解决Vue.js显示数据的时,页面闪现

위 내용은 반응 서버 렌더링 구현과 관련된 문제를 자세히 설명하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!