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

1.NextJS基础

NextJS注意要点

  1. 文件用来定义路由,folder name becomes the route name
  2. 注意区分客户端渲染和服务器渲染
    • html渲染完成后给到客户端(此时网页内容已经全部提供),有利于crawler和优化seo
    • 逻辑更简单
    • request deduplication减少API请求
      可以对比如下两份代码
// 客户端渲染
import React, { useEffect, useState } from "react";

function Home() {
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    const fetchAlbums = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/albums"
        );
        const data = await response.json();
        setAlbums(data);
      } catch (error) {
        console.error("Error fetching albums:", error);
      }
    };
    fetchAlbums();
  }, []);

  return (
    <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
      {albums.map((album) => (
        <div
          key={album.id}
          className="bg-white shadow-md rounded-lg p-4 transition transform hover:scale-105 hover:shadow-lg"
        >
          <h3 className="text-lg font-bold mb-2">{album.title}</h3>
          <p className="text-gray-600">Album ID: {album.id}</p>
        </div>
      ))}
    </div>
  );
}

export default Home;
// 服务器渲染
async function Home() {
  const response = await fetch("https://jsonplaceholder.typicode.com/albums");
  if (!response.ok) throw new Error("Failed to fetch data");
  const albums = await response.json();

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {albums.map((album) => (
        <div
          key={album.id}
          className="bg-white shadow-md rounded-lg p-4 transition-transform duration-200"
        >
          <h3 className="text-lg font-bold mb-2">{album.title}</h3>
          <p className="text-gray-600">ID: {album.id}</p>
        </div>
      ))}
    </div>
  );
}

export default Home;

关键名词解释:
SSG(Static Site Generation):
在构建时生成html页面,而不是用户请求的时候,用户从CDN请求页面,所以并不适用于页面需要频繁修改的场景。
ISR(Incremental Static Regeneration)
SSG的扩展,基于时间来更新网页,适用于频繁改动但又不需要实时更新的网页。
SSR (Server Side Rendering)
Html在请求时由服务器生成,适合内容实时更新的场景
PPR (Partial PreRendering)
nextjs会生成一个壳来承载动态组件(用suspense标签标识)

相关文章:

  • skynet网络包库(lua-netpack.c)的作用解析
  • 关于大数据的基础知识(四)——大数据的意义与趋势
  • AQS是什么,使用应注意什么
  • 【CXX-Qt】4.5 Traits
  • 【AndroidRTC-11】如何理解webrtc的Source、TrackSink
  • QML指示控件:ScrollBar与ScrollIndicator
  • 【江协科技STM32】Unix时间戳(学习笔记)
  • java 设置操作系统编码、jvm平台编码和日志文件编码都为UTF-8的操作方式
  • AI Agent开发大全第八课-Stable Diffusion 3的本地安装全步骤
  • FreeRTOS学习(九):中断管理
  • Android Compose框架的值动画(animateTo、animateDpAsState)(二十二)
  • 【MySQL】~/.my.cnf文件
  • 深入探讨MySQL数据库备份与恢复:策略与实践
  • EasyUI数据表格中嵌入下拉框
  • 【c++】【STL】unordered_set 底层实现总结
  • Spring Boot整合SSE实现消息推送:跨域问题解决与前后端联调实战
  • Siri接入DeepSeek快捷指令
  • matlab 模拟 闪烁体探测器全能峰
  • 计算机复试面试
  • 【软考网工-理论篇】第六章 网络安全
  • 我国已形成完整人工智能产业体系,专利申请量位居全球首位
  • 荣盛发展去年亏损约84.43亿元,要“过苦日子、紧日子”
  • 宜家上海徐汇商场明天恢复营业,改造后有啥新变化?
  • 海南旅文局通报游客入住酒店港币被调包:成立调查组赴陵水调查
  • 艺术与医学的对话,瑞金医院办了一个展览
  • 讲座|现代女性在面对生育、事业与家庭之间的复杂抉择