React 之服务端渲染 SSR

最新推荐文章于 2024-03-04 08:52:09 发布

Bal炎魔

最新推荐文章于 2024-03-04 08:52:09 发布

阅读量408

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_44479322/article/details/116461036

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React 之服务端渲染 SSR

Next.js 介绍

Next is 是 React 服务端渲染应用框架。用于构建 SEO 友好的 SPA 应用。

支持两种预渲染方式，静态生成和服务器端渲染。
基于页面的路由系统，路由零配置
自动代码拆分。优化页面加载速度
支持静态导出，可将应用导出为静态网站
内置 CSS-in-JS 库 styled-jsx
方案成熟，可用于生产环境，世界许多公司都在使用
应用部署简单，拥有专属部署环境 Vercel，也可以部署在其他环境

中文文档：https://www.nextjs.cn/docs

项目创建

创建：npm init next-app [项目名]
运行：npm run dev
访问：localhost:3000

临时安装 create-next-app 用于创建 Next. Js 项目

创建页面

在 Next Js 中，页面是被放置在 pages 文件夹中的 React 组件
组件需要被默认导出
组件文件中不需要引入 React
页面地址与文件地址是对应的关系

页面跳转

页面与页面之间通过 Link 组件进行跳转
Link 组件默认使用 Javascript 进行页面跳转。即 SPA 形式的跳转
如果浏览器中 Javascript 被禁用则使用链接跳转
Link 组件中不应添加除 href 属性以外的属性，其余属性添加到 a 标签上
Link 组件通过预取（在生产中）功能自动优化应用程序以获得最佳性能

静态资源

应用程序根目录中的 public 文件夹用于提供静态资源。
通过一下形式访问：
public/images/1.png -> /images/1.png
public/css/base.css -> /css/base.css

修改页面元素

通过 head 组件修改元数据, 修改head内的标签

import Head from 'next/head';
<>
	<Head>
		<title> Index Page </title>
	<Head/>
</>

CSS 样式

内置 styled-jsx

在 Next.js 中内置了 styled-jsx，它是一个 CSS-in-JS 库，允许在 React 组件中编写 CSS, CSS 仅作用于组件内部。

CSS 模块

通过使用 CSS 模块功能，允许将组件的 CSS 样式编写在单独的 CSS 文件中

CSS 模块约定样式文件的名称必须为组件文件名称.module.css

全局样式文件

在 pages 文件夹中新建 _app.js 文件并加入如下代码
在项目根目录下创建 styles 文件夹，并在其中创建 global.css
在 _app.js 中通过 import 引入 global.css
重新启动开发服务器

// _app.js
import '../styles.css';

export default function App ({Component, pageProps}) {
  return <Component {...pageProps}/>
}

预渲染

预渲染是指数据和 HTML 的拼接在服务器端提前完成
预渲染可以使 SEO 更加友好
预渲染会带来更好的用户体验，可以无需运行 JavaScript 即可查看应用程序 UI

预渲染的两种形式

在 Next. Js 中支持两种形式的预渲染：静态生成和服务器端渲染
静态生成和服务器端渲染是生成 HTML 的时机不同
静态生成：静态生成是在构建时生成 HTML 以后的每个请求都共用构建时生成好的 HTML
服务器端染：服务器端渲染是在请求时生成 HTML。每个请求都会重新生成 HTML

两种预渲染方式的选择

Next.js允许开发者为每个页面选择不同的预渲染方式不同的预渲染方式拥有不同的特点应根据场景进行渲染

但建议大多数页面建议使用静态生成

静态生成一次构建，反复使用，访问速度快因为页面都是事先生成好的

适用场景：营销页面、博客文章、电子商务产品列表、帮助和文档等

服务器端渲染访问速度不如静态生成快，但是由于每次请求都会重新渲染，所以适用数据频繁更新的页面或页面内容随请求变化而变化的页面

无数据和有数据的静态生成

如果组件不需要在其他地方获取数据，直接进行静态生成

如果组件需要在其他地方获取数据，在构建时 Next.js 会顶先获取组件需要的数据，然后再对组件进行静态生成

静态生成 getStaticProps()

getStaticProps 方法的作用是获取组件静态生成需要的数据，并通过 props 的方式将数据传通给组件该方法是一个异步函数，需要在组件内部进行导出
在开发模式下，getStaticProps 改为在每个请求上运行.

export async function getStaticProps () {
  // 从系统文件，API，数据库中获取数据
  let data = await ...
  return {
    props: ...
  }
}

Bal炎魔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 之服务端渲染 SSR

React 之服务端渲染 SSRNext.js 介绍Next is 是 React 服务端渲染应用框架。用于构建 SEO 友好的 SPA 应用。支持两种预渲染方式，静态生成和服务器端渲染。基于页面的路由系统，路由零配置自动代码拆分。优化页面加载速度支持静态导出，可将应用导出为静态网站内置 CSS-in-JS 库 styled-jsx方案成熟，可用于生产环境，世界许多公司都在使用应用部署简单，拥有专属部署环境 Vercel，也可以部署在其他环境...
复制链接

扫一扫