5.1-Next 服务端渲染

Create by fall on 25 Aug 2023 Recently revised in 10 Nov 2023

SSR：服务端渲染，会在服务端渲染完成后，然后将 html（有 DOM 结构）返回给客户端

SSG：静态页面生成，会直接生成 HTML 文件

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

详情可看：服务端渲染

初始化项目

npx create-next-app@latest

根据选项，选择对应的依赖，进行安装。

路由方式

路由方式一：使用 src/app

路由方式二：使用 src/pages 根据项目路径路由划分应用路由（以 _App.tsx 开头的文件会被忽略）

尽管可以同时使用两种路由方式，但是为了避免冲突，还是应该就尽量保证只使用一个

官方建议使用 src/app，也就是 App Router，能应用到更多 React 的新特性

文件资源

会将 png 等内容放置在 ./public 目录下面，在项目内部调用的时候，可以直接使用 / 进行调用（例如：/image.jpg）

样式处理

采用默认选项时，会提供 tailwindcss 进行 css 处理，也提供了 styled-jsx

<div>
  <div className="demo">test</div>
  <style jsx>{`
    .demo {
        color: red;
    }
 `}
  </style>
</div>

以及 xx.module.css

// index.module.scss
body {
  background: red;
}

import styles from './index.module.css';
<div className={styles.p}>test</div>

SSG 处理

使用 getStaticProps 方法，可以获取到渲染静态页面时需要的数据，getStaticProps 这个方法是构建的时候运行的，因此可以访问文件和数据库。

import Head from 'next/head';
import styles from './list.moduls.css'

// 导出一个异步函数
export async function getStaticProps() {
  // 从文件系统，API，数据库中获取数据
  const data = '...'
  // props属性的值将会传递给组件
  return {
    props: '...' // 返回的数据
  }
}

export default function List(props) {
  // props中获取到getStaticProps中返回的props
  rteurn (<>
    <Head>
    <title>Index Page</title>
  </Head>
  <div className={styles.demo}>test</div>
  </>)
}

参考文章

作者	文章名称
隐冬	Next.js上手指南

Next​

初始化项目​

路由方式​

文件资源​

样式处理​

SSG 处理​

参考文章​

Next