Next.js入门介绍

留言

基于React框架

React框架其实只是个视图层框架,解决html怎么和js打通的问题(包括路由功能,react框架本身都没提供,开放给其他人提供解决方案; 而vue则几乎都有)

【NextJS】面向前端开发的全栈解决方案

NestJS主要面向后端

NextJS则侧重点在前端,

母公司是Vercel(知名的部署工具),算是国外一个明星创业项目~

Vercel 与 Next.js：开源全明星团队背后的商业逻辑｜Monetizing Open Source 居然是阿根廷人搞的..

https://juejin.cn/post/7057333396359348255

其中一个中国的员工 shuding

https://shud.in/

https://github.com/shuding

https://x.com/shuding_

https://v0.dev/shuding

2020年04月才改名Vercel,之前叫zeit


为前端开发人员提供的全栈解决方案

15min快速上手nextjs

01-Next.js介绍

大概是在React基础上又封装了一层,做起东西来能更快~

也可以用来写API,即 全栈框架


nest vs next —> nest是用来写后端API的node框架…

Nuxt则是Vue全家桶的一员

01.Nuxt3简介和开发环境搭建


20250716:

Vercel 发起收购，我们三年多前的预测，居然全部成真了

Vercel收购Nuxt


SSR和SSG是什么


SSR (Server-Side Rendering) 和 SSG (Static Site Generation) 是两种不同的网站渲染和部署策略。让我为您详细解释这两个概念：

  1. SSR (Server-Side Rendering):

SSR 是指在服务器上渲染网页内容，然后将完全渲染好的 HTML 发送到客户端。

优点：

  • 更好的首次加载性能，特别是对于内容丰富的页面
  • 更好的搜索引擎优化 (SEO)，因为搜索引擎可以直接爬取完整的 HTML 内容
  • 适合动态内容，可以根据每个请求生成不同的内容

缺点：

  • 服务器负载较高，因为每个请求都需要服务器处理
  • 页面切换可能较慢，因为每次都需要向服务器请求新的页面
  1. SSG (Static Site Generation):

SSG 是在构建时预先生成所有页面的 HTML，然后将这些静态文件部署到服务器或 CDN 上。

优点：

  • 极快的加载速度，因为所有内容都是预先生成的静态文件
  • excellent的 SEO 表现
  • 安全性高，因为没有动态服务器处理
  • 部署和扩展简单，可以轻松部署到 CDN

缺点：

  • 不适合频繁更新的动态内容
  • 构建时间可能较长，特别是对于大型网站
  • 不适合需要实时或用户特定数据的页面

比较：

  • SSR 适合需要实时数据或用户特定内容的动态网站
  • SSG 适合内容相对静态、更新频率较低的网站，如博客、文档网站等

现代框架如 Next.js 支持同时使用这两种方法，甚至还有 ISR (Incremental Static Regeneration) 等混合方案，允许开发者根据不同页面的需求选择最合适的渲染策略。

如果您需要更多关于如何在项目中实施这些策略的信息，我可以为您提供更具体的建议。


服务端渲染和服务端生成的区别是什么？各自有何优缺点？


(前后端分离后,基本都是服务端生成了,然后传到CDN里)

服务端渲染（Server-Side Rendering，SSR）和服务端生成（Server-Side Generation，SSG）虽然都在服务器端处理内容，但它们有着重要的区别。让我们详细比较一下这两种方法：

  1. 服务端渲染（SSR）：

定义：SSR 是在每次收到请求时，服务器动态生成 HTML 内容并发送给客户端。

优点：

  • 实时数据：可以为每个请求提供最新的数据。
  • 个性化内容：可以根据用户状态（如登录信息）生成定制内容。
  • 良好的 SEO：搜索引擎可以爬取完整的 HTML 内容。
  • 首次内容加载快：用户能快速看到完整的页面内容。

缺点：

  • 服务器负载高：每个请求都需要服务器处理。
  • 可能的响应延迟：如果服务器负载高，响应时间可能增加。
  • 配置复杂：需要维护能够执行服务端 JavaScript 的服务器环境。
  1. 服务端生成（SSG）：

定义：SSG 是在构建时预先生成所有静态 HTML 页面，然后将这些页面部署到服务器或 CDN。

优点：

  • 极快的加载速度：所有页面都是预先生成的静态文件。
  • 安全性高：不涉及动态内容生成，减少了安全风险。
  • 低服务器负载：服务器只需要提供静态文件。
  • 简单部署：可以轻松部署到 CDN 或静态文件托管服务。
  • 优秀的 SEO：所有内容都在 HTML 中，便于搜索引擎爬取。

缺点：

  • 内容更新不及时：需要重新构建和部署才能更新内容。
  • 不适合高度动态的内容：难以处理需要实时数据的页面。
  • 构建时间长：对于大型站点，生成所有页面可能需要很长时间。
  • 个性化限制：难以提供用户特定的内容。

主要区别：

  1. 内容生成时机：SSR 是每次请求时生成，SSG 是在构建时生成。
  2. 数据新鲜度：SSR 可以提供实时数据，SSG 提供的是构建时的数据。
  3. 服务器负载：SSR 的服务器负载较高，SSG 的服务器负载很低。
  4. 适用场景：SSR 适合动态内容，SSG 适合相对静态的内容。

选择建议：

  • 如果您的网站内容频繁更新，需要实时数据或个性化内容，选择 SSR。
  • 如果您的网站内容相对稳定，更新频率低，并且希望获得最佳性能和扩展性，选择 SSG。

许多现代框架（如 Next.js、Nuxt.js）支持同时使用这两种方法，甚至提供混合解决方案如增量静态再生（ISR），允许开发者根据不同页面的需求选择最合适的渲染策略。

如果您需要针对特定项目场景的建议，我可以提供更具体的指导。





20241122

zeyu 那边需要更新saas那边几十个客户的index.html中的banner图. 如何做到不一样?

目标是希望在推特,telegram中发链接能有view图

没法请求代码进行动态渲染,好像在推特上tg里不允许动态js

搞了一个

https://dashboard.prerender.io/integration-wizard/verification

选的cf

会给一个秘钥,在cf上配置一个worker, worker里的代码是 https://gist.githubusercontent.com/Lasalot/a94b6ba00cf99735d23df183b7b94a6d/raw/c495c7cdd1b9e3504d13c931101ff4b347562746/prerender.worker.js

当然这个nextjs好像没啥直接关系

但我们前端用的vue,但是的ssr用的不是nuxtjs 而是 nextjs

然后就生效了

目前testtaskonweb.taskon.xyz是ok的

第三方的,用的是cf的pages的,还不行~

用这个prerender的教程中,需要关闭CF的 自动签名交换 (SXG)

这东西是google前几天搞出来的一套东西

https://www.cnseo.com/2022/11/

https://github.com/brave/brave-browser/issues/24227

https://prerender.io/ 干什么用的？

Prerender 是一款为 JavaScript 网站提供预渲染解决方案的工具，主要用于解决动态内容在搜索引擎中的索引问题。它的功能和优势包括：

  1. 提高索引速度：Prerender 可以加速网页的索引过程，使得网站内容更快地被搜索引擎抓取和索引，从而提高网站排名。

  2. 优化爬虫抓取：通过为搜索引擎爬虫提供已渲染的 HTML 页面，Prerender 大幅提升了爬虫的抓取效率。

  3. 动态内容处理：支持动态内容的渲染，确保搜索引擎能够“读取”到网页上的所有重要信息。

  4. 兼容多种技术栈：Prerender 与多种流行的 JavaScript 框架（如 React、Angular、Vue）兼容，易于集成。

  5. 改善用户体验：通过提高页面加载速度，Prerender 不仅优化了搜索引擎的抓取效果，也提升了用户访问网站的体验。

  6. 社交媒体共享：增强社交媒体分享的预览效果，确保在分享链接时能展示丰富的信息。

总的来说，Prerender 旨在帮助网站管理员克服 JavaScript SEO 挑战，提高网站的可见性和流量。