当前位置： 首页 > news >正文

如何使用 Next.js 进行服务端渲染（Server-Side Rendering, SSR）

news 2025/9/13 20:24:16

文章目录

    • 前言
    • 步骤 1: 创建 Next.js 应用
    • 步骤 2: 创建页面组件
      • 示例页面组件
    • 步骤 3: 自定义 _app.js 文件
    • 步骤 4: 自定义 _document.js 文件
    • 步骤 5: 运行应用
    • 步骤 6: 构建和部署
    • 总结

前言

  Next.js 本身就支持 SSR 并提供了一系列内置的方法来简化这个过程。下面将详细介绍如何使用 Next.js 进行 SSR，并提供具体的示例代码。

步骤 1: 创建 Next.js 应用

  首先，你需要安装 Next.js 并创建一个新的项目。如果你还没有安装 Next.js 和 React，请先安装它们：

npm install -g create-next-app
create-next-app my-app
cd my-app
npm run dev

  或者，如果你已经有了一个项目，可以跳过创建新项目的步骤。

步骤 2: 创建页面组件

  Next.js 通过文件系统路由机制来管理页面。每个位于 pages 目录下的文件都会自动成为一个页面。接下来，我们将创建一个简单的页面组件，并使用 SSR 来获取数据。

示例页面组件

  在 pages 目录下创建一个名为 about.js 的文件，并编写以下内容：

// pages/about.js
export async function getServerSideProps(context) {const res = await fetch('https://api.example.com/about');const data = await res.json();// 返回页面的初始 propsreturn { props: { data } };
}export default function AboutPage({ data }) {return (<div><h1>About Page</h1><p>{data.description}</p></div>);
}

  在这个示例中，我们使用了 getServerSideProps 函数来获取数据。该函数在服务器端执行，并返回页面的初始 props。

步骤 3: 自定义 _app.js 文件

  _app.js 文件是 Next.js 应用的根组件，你可以在这里自定义全局的布局和样式。

// pages/_app.js
import App from 'next/app';
import Head from 'next/head';function MyApp({ Component, pageProps }) {return (<><Head><title>My App</title><meta charSet="utf-8" /><meta name="viewport" content="initial-scale=1.0, width=device-width" /></Head><Component {...pageProps} /></>);
}export default MyApp;

步骤 4: 自定义 _document.js 文件

  _document.js 文件用于自定义生成的 HTML 文档结构。你可以在这里添加自定义的 标签等。

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';class MyDocument extends Document {render() {return (<Html lang="en"><Head><link rel="stylesheet" href="path/to/custom.css" /></Head><body><Main /><NextScript /></body></Html>);}
}export default MyDocument;

步骤 5: 运行应用

npm run dev

  访问 http://localhost:3000/about，你应该能看到通过服务端渲染生成的页面。

步骤 6: 构建和部署

  构建生产环境版本：

npm run build
npm start

总结

  使用 Next.js 进行服务端渲染非常简单，只需要按照以下步骤：

  • 创建页面组件并在其中使用 getServerSideProps 函数来获取数据。
  • 自定义 _app.js 文件来添加全局布局和样式。
  • 自定义 _document.js 文件来生成 HTML 文档结构。
  • 运行开发服务器或构建生产环境版本。

  通过这些步骤，你可以轻松地使用 Next.js 实现服务端渲染，并享受 SSR 带来的诸多好处，如更好的首屏加载速度、搜索引擎优化（SEO）和支持离线应用等功能。

  




相关文章：

如何使用 Next.js 进行服务端渲染（Server-Side Rendering, SSR）

文章目录 前言步骤 1: 创建 Next.js 应用步骤 2: 创建页面组件示例页面组件 步骤 3: 自定义 _app.js 文件步骤 4: 自定义 _document.js 文件步骤 5: 运行应用步骤 6: 构建和部署总结 前言 Next.js 本身就支持 SSR 并提供了一系列内置的方法来简化这个过程。下面将详细介绍如何使…...

编程日记 2024/9/20 8:35:45

【machine learning-八-可视化loss funciton】

可视化lossfunction loss funciton可视化损失函数等高图 loss funciton 上一节讲过损失函数&#xff0c;也就是代价函数&#xff0c;它是衡量模型训练好坏的指标&#xff0c;对于线性回归来说&#xff0c;模型、参数、损失函数以及目标如下&#xff1a;、 损失函数的目标当然…...

编程日记 2024/9/20 8:32:08

Android 将EasyPermissions进一步封装,使得动态权限申请更加简明

1.引入依赖: implementation pub.devrel:easypermissions:3.0.0 2.在BaseActivity处理统一的结果回调和请求Code 核心内容: (1)处理Activity本身继承的方法onRequestPermissionsResult (2)实现接口EasyPermissions.PermissionCallbacks来接收请求结果 (3)定义申请权…...

编程日记 2024/9/20 8:29:06

我的AI工具箱Tauri版-VideoReapeat视频解说复述克隆

本教程基于自研的AI工具箱Tauri版进行VideoReapeat视频解说复述克隆。 VideoReapeat视频解说复述克隆 是自研的AI工具箱Tauri版中的一款专用模块&#xff0c;旨在通过AI技术对视频解说内容进行复述和克隆。该工具可自动洗稿并重新生成视频解说&#xff0c;通过简单配置即可对大…...

编程日记 2024/9/20 8:28:05

MySQL5.7.42高可用MHA搭建及故障切换演示

系列文章目录 rpmbuild构建mysql5.7RPM安装包 MySQL基于GTID同步模式搭建主从复制 文章目录 系列文章目录前言一、MHA架构介绍1.MHA的功能2.MHA组成3.MHA故障转移过程4.MHA架构优缺点 二、环境准备1.服务器免密2.基于GTID主从复制搭建3.下载mha组件 三、MHA组件安装1.安装依赖…...

编程日记 2024/9/20 8:27:04

快速搭建最简单的前端项目vue+View UI Plus

1 引言 ‌‌Vue是一套用于构建Web前端界面的渐进式JavaScript框架。‌‌它以其易学易用、性能出色、灵活多变而深受开发者喜爱&#xff0c;并且与其他前端框架&#xff08;如‌React和‌Angular&#xff09;相比&#xff0c;在国内市场上受到了广泛的认可和使用。点击进入官方…...

编程日记 2024/9/20 8:26:03

倍增练习(1)

A - ST 表 && RMQ 问题 题目思路:st表的板子题用于静态区间求最值,通过倍增的思想,先通过预处理将各个区间的最大值通过转移式求出f[i][j] max(f[i][j - 1], f[i (1 << (j - 1))][j - 1]);然后再进行重叠查询查询,k log2(r - l 1);,max(f[l][k], f[r - (1 &l…...

编程日记 2024/9/20 8:25:02

MATLAB 在数学建模中的深入应用：从基础到高级实践

目录 前言 一、MATLAB基础知识 1.1 MATLAB工作环境简介 1.1.1 命令窗口&#xff08;Command Window&#xff09; 1.1.2 工作区&#xff08;Workspace&#xff09; 1.1.3 命令历史&#xff08;Command History&#xff09; 1.1.4 编辑器&#xff08;Editor&#xff09; 1…...

编程日记 2024/9/20 8:24:01

Unity 设计模式 之 【什么是设计模式】/ 【为什么要使用设计模式】/ 【架构和设计模式的区别】

Unity 设计模式 之 【什么是设计模式】/ 【为什么要使用设计模式】/ 【架构和设计模式的区别】 目录 Unity 设计模式 之 【什么是设计模式】/ 【为什么要使用设计模式】/ 【架构和设计模式的区别】 一、简单介绍 二、 Unity 设计模式 1、Unity 开发中使用设计模式的特点 2…...

编程日记 2024/9/20 8:23:00

[数据集][目标检测]智慧交通铁路异物入侵检测数据集VOC+YOLO格式802张7类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;802 标注数量(xml文件个数)&#xff1a;802 标注数量(txt文件个数)&#xff1a;802 标注类别…...

编程日记 2024/9/20 8:18:54

飞驰云联FTP替代方案：安全高效文件传输的新选择

FTP协议广泛应用各行业的文件传输场景中&#xff0c;由于FTP应用获取门槛低、使用普遍&#xff0c;因此大部分企业都习惯使用FTP进行文件传输。然而面临激增的数据量和网络安全威胁的不断演变&#xff0c;FTP在传输安全性与传输性能上有所欠缺&#xff0c;无法满足企业现在的高…...

编程日记 2024/9/20 8:13:49

Hive内置集合函数-size,map_keys,map_values,sort_array,array_contains

1. Hive内置Collection Functions 以下函数为Hive是提供的内置集合函数: 返回类型函数(签名)函数说明intsize(Map<K.V>)Returns the number of elements in the map type.intsize(Array)Returns the number of elements in the array type.arraymap_keys(Map<K.V>…...

编程日记 2024/9/20 8:12:48

Exchange Online 计划 2 部署方案

目录 前言 一、前期准备 1. 了解 Exchange Online 计划 2 的功能 2. 系统要求 3. 网络要求 4. 账户和许可 二、安装和配置 Exchange Online 计划 2 1. 注册 Microsoft 365 订阅 2. 验证域 3. 用户和许可证分配 4. 迁移现有邮箱 迁移步骤 三、配置 Exchange Online …...

编程日记 2024/9/20 8:10:46

图数据库的力量：深入理解与应用 Neo4j

图数据库的力量&#xff1a;深入理解与应用 Neo4j 文章目录 图数据库的力量&#xff1a;深入理解与应用 Neo4j1、什么是 Neo4j&#xff1f;版本说明 2、Neo4j 的部署和安装Neo4j Web 工具介绍 3、体验 Neo4j加载数据查询数据数据结构 4、Cypher 入门创建数据查询数据关系深度查…...

编程日记 2024/9/20 8:09:45

Deutsch intensiv C1 Schreiben

Deutsch intensiv C1 Schreiben Part A1, Kasten Part A 1, Kasten (1)zeigt (A) (2)gibt Auskunft ber (A)/darber (3)liefert Daten/Informationen ber(A)/darber (4)stellt(A) dar...

编程日记 2024/9/20 8:04:40

大数据新视界 --大数据大厂之DevOps与大数据：加速数据驱动的业务发展

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

编程日记 2024/9/20 8:02:38

实战OpenCV之图像阈值处理

基础入门 图像阈值处理是一种二值化技术&#xff0c;它基于预设的阈值&#xff0c;可以将图像中的像素分为两大类&#xff1a;一大类是背景&#xff0c;另一大类是前景或目标对象。这个过程涉及将图像中的每个像素值与阈值进行比较&#xff0c;并根据比较结果决定保留原始值还是…...

编程日记 2024/9/20 8:00:37

登录后继续执行方法

场景 点击按钮&#xff0c;检测到未登录&#xff0c;直接跳转到登录页&#xff0c;登录成功后&#xff0c;返回页面继续执行刚才的点击事件 思路 在跳转时用一个队列存储该事件&#xff0c;登录成功后执行队列里的事件 队列 class Queue {constructor() {this.task []}cl…...

编程日记 2024/9/20 7:59:36

JVM-类加载器的双亲委派模型详解

JVM中存在三个默认的类加载器&#xff1a; BootstrapClassLoaderExtClassLoaderAppClassLoader AppClassLoader的父加载器是ExtClassLoader&#xff0c;ExtClassLoader的父加载器是 BootstrapClassLoader。 它们之间的关系是&#xff1a;AppClassLoader->ExtClassLoader-&…...

编程日记 2024/9/20 7:57:34

【计算机基础题目】Linux系统中文件权限 字母权限和数字权限的相互转换

创作日志&#xff1a; 很久之前对这个略有了解&#xff0c;但是现在完全忘记了&#xff0c;看到这类题目一脸懵逼&#xff0c;现在系统复习下。 1、权限的数字表示&#xff08;3位&#xff09; 在Linux系统中&#xff0c;文件权限由一个三位的八进制数表示&#xff0c;每一位代…...

编程日记 2024/9/20 7:55:32

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/9/13 15:21:48

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/9 16:59:16

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/9/9 14:48:41

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/9/9 15:00:49

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/8/30 16:34:33

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/9/5 15:11:07

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/12 19:00:19

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/8/8 6:07:28

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/9/2 11:57:55

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/11 23:31:22