React SSR

Fhup
261 阅读3分钟

邂逅React SSR

单页面富应用(SPA)的二个缺点:

  • 首屏渲染显示长时间的空白(请求的资源很多)

  • SEO优化时,html文件中没有内容(js未请求未加载)

如何解决这种缺点呢? 使用SSR

SSR(Server Slide Rendering: 服务端渲染), 指的是页面在服务器端已经生成了完成的HTML页面结构, 不需要浏览器解析.

对应的是CSR(Client Side Rendering: 客户端渲染), 我们开发的SPA页面通常依赖的就是客户端渲染.

常见的服务端渲染: PHP JSP ASP ...

我们可以借助NodeJs帮助我们执行JavaScript代码,发生Ajax请求, 提前完成页面的渲染.

认识同构

  • 一套代码既可以在服务端运行又可以在客户端运行,这就是同构应用.

  • 同构是一种SSR的形态,是现代SSR的一种表现形式.

  • 当用户发出请求时,先在服务器通过SSR渲染出首页的内容.

  • 但是对应的代码同样可以在客户端被执行.

  • 执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染.

优秀的SSR框架

Vue中使用的SSR框架: Nuxt.js

React中使用的SSR框架: Next.js

学习React SSR的框架 Next.js

npm install create-next-app -g

create-next-app 项目名(小写)

创建完项目之后, pages里面的index.js就相当于路径 ' / ' (通过默认路径进行访问). 创建about.js文件,相当于路径 ' /about ' (通过 localhost:3000/about 访问) .

image.png

image.png

点击index.js文件,import出现波浪线报红(但能运行),解决方案:

1. 创建 .babelrc 文件

{
  "presets": ["next/babel"],
  "plugins": []
}

2. 修改 .eslintrc.json 文件

{
  "extends": ["next/babel", "next/core-web-vitals"],
  "rules": {}
}

注意: 修改完成之后,需要重新执行 yarn dev

修改index.js文件之后,用ApiPost对 localhost:3000 进行测试. 解决了SEO问题.

image.png

image.png

默认a链接进行跳转和next框架的link跳转的区别?

image.png

1. 点击a链接, 服务端渲染

image.png

2. 点击next的link, 客户端渲染

image.png

Next.js框架的简单使用

1. Head的修改(title,icon...)

import Head from "next/head";

function Home() {
  return (
    <div>
      <Head>
        <title>蛋糕店</title>
      </Head>
    </div>
  );
}

2. 如何让每个页面都有相同的头部和尾部?

2.1 自定义组件解决

image.png

import AppLayout from "../components/AppLayout";

export default function Home() {
  return (
    <AppLayout>
    
      <h1>首页</h1>
      <h2>蛋糕店</h2>
      <ul>
        <li>蛋糕种类1</li>
        <li>蛋糕种类2</li>
        <li>蛋糕种类3</li>
      </ul>
      
    </AppLayout>
  );
}

2.2 _app.js解决, 添加头部和尾部即可

image.png

image.png

3. css

3.1 全局css, 在_app.js中导入才能生效

image.png

image.png

3.2 局部css

image.png

image.png

3.3 styled-jsx: 一种 css in js 技术(Next框架默认集成)

<style>{`
        h2 {
          color: blue;
          text-decoration: underline;
        }
`}</style>

3.4 想要使用styled-components,先安装依赖. 但是Next是服务端渲染,刷新之后就不能正常使用styled-components. 使用插件让其正常渲染显示

yarn add -D babel-plugin-styled-components

在.babelrc中进行配置
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["styled-components"]
  ]
}

4. 请求数据

getInitialProps在页面中启用服务端渲染, 进行初始数据填充, 提升了SEO优化.

function Page(props) {
  return <div>{props.name}</div>
}
Page.getInitialProps = async (props) => {
  // 网络请求
  return { name: 'Fhup' }
}
export default Page
avatar
文章
阅读
粉丝