阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Next.js 教程

      Next.js

      Next.js 是一个轻量级的 React 服务端渲染应用框架。

      什么是服务端渲染?

      服务端渲染,是指页面的渲染和生成由服务器来完成,并将渲染好的页面返回客户端。而客户端渲染是页面的生成和数据的渲染过程是在客户端(浏览器或 APP)完成。

      随着前后端分离模式的兴起,从服务端渲染到服务端渲染的演进,前端 Web App 给前端开发带来了很大的便利,并减轻后端服务器压力。

      前后端解耦,让前端专注做好用户 UI 层,专注于提升用户体验,让后端专注于业务逻辑处理,分离成微服务,专心做好一件事。

      前后端分离前的服务端渲染技术有:PHP,ASP,JSP 等方式,分离后的前端 SPA(单页面应用)渲染拥有独立的路由和页面渲染(React,Vue 和 Angular 等),而 SPA 的最大问题是对 SEO 不友好,当项目对 SEO 有需求时,SPA 就不是一个好的选择。

      近两年来,React 和 Vue 也开始支持服务端渲染(Server Side Render ),行业内也有这方面的实践,其中掘金就使用 Vue 的 SSR 功能做了全站服务端渲染,且效果良好。

      我们现在介绍一个 React 生态中表现突出的服务端渲染框架:Next.js。

      特性

      Next.js 是一个基于 React 的一个服务端渲染简约框架。它使用 React 语法,可以很好的实现代码的模块化,有利于代码的开发和维护。

      Next.js 带来了很多好的特性:

      • 默认服务端渲染模式,以文件系统为基础的客户端路由

      • 代码自动分隔使页面加载更快

      • (以页面为基础的)简洁的客户端路由

      • 以 webpack 的热替换为基础的开发环境

      • 使用 React 的 JSX 和 ES6 的 module,模块化和维护更方便

      • 可以运行在 Express 和其他 Node.js 的 HTTP 服务器上

      • 可以定制化专属的 babel 和 webpack 配置

      怎么开始构建一个 Next.js 项目?

      在开始构建 Next.js 项目之前,需要做好一些准备:

      • 首先,不管你使用哪个操作系统,你需要一个趁手的命令行工具,在 Mac 系统和 Linux 下自带的命令行工具比较好用,在 Windows 系统下,我推荐一个命令行工具:Cmder;

      • 已经在本地安装好 Nodejs 和 Npm;

      • 熟悉 React 技术栈开发及 ES6 语法;

      • 熟悉 Express 架构的 Nodejs 开发。

      下面开始构建一个 Next.js 项目。

      安装运行

      Clone 代码到本地并运行

      git clone https://github.com/raoenhui/next-site-cn.git
      cd next-site-cn
      yarn
      yarn dev
      

      在浏览器中打开 http://localhost:3000 进行访问

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录