HTTP
-
HTTP 报文结构是怎样的？
-
HTTP有哪些请求方法？
-
GET 和 POST 有什么区别？
-
如何理解 URI？
-
如何理解 HTTP 状态码？
-
简要概括一下 HTTP 的特点？HTTP 有哪些缺点？
-
对 Accept 系列字段了解多少？
-
对于定长和不定长的数据，HTTP 是怎么传输的？
-
HTTP 如何处理大文件的传输？
-
HTTP 中如何处理表单数据的提交？
-
HTTP1.1 如何解决 HTTP 的队头阻塞问题？
-
对 Cookie 了解多少？
-
如何理解 HTTP 代理？
-
如何理解 HTTP 缓存及缓存代理？
-
为什么产生代理缓存？
-
源服务器的缓存控制
-
客户端的缓存控制
-
什么是跨域？浏览器如何拦截响应？如何解决？
-
支持两种预渲染方式，静态生成和服务器端渲染
-
基于页面的路由系统，路由零配置
-
自动代码拆分，优化页面加载速度
-
支持静态到处，可将应用导出为静态网站
-
内置 CSS-in-JS 库 styled-jsx
-
方案成熟，可用于生产环境，世界许多公司都在使用
-
应用部署简单，拥有专属部署环境 Vercel，也可以部署在其他环境
=======================================================================
-
创建：
npm init next-app 项目名 -
运行：
npm run dev -
访问：
localhost:3000 -
临时安装 create-next-app 用于创建 Next.js 项目
===================================================================
创建页面
-
在 Next.js 中，页面是被放置在 pages 文件夹中的 React 组件
-
组件需要被默认导出
-
组件文件中不需要引入 React
-
页面地址与文件地址是对应的关系
-
创建页面
// pages/list.js
export default function List () {
return
}
-
文件位置:
pages/index.js -
访问地址：
localhost:3000/ -
文件位置:
pages/list.js -
访问地址：
localhost:3000/list -
文件位置:
pages/post/first.js -
访问地址：
localhost:3000/post/first
页面跳转
-
Link 组件默认使用 JS 进行页面跳转。即 SPA 形式的跳转
-
如果浏览器中 JS 被禁用，则使用链接跳转
-
Link 组件中不应添加除 href 属性以外的属性，其余属性添加到 a 标签上
-
Link 组件通过预取（在生产中）功能自动优化应用程序已获得最佳性能
import Link from 'next/link'
======================================================================
应用程序根目录中的 public 文件夹用于提供静态资源
-
通过以下形式进行访问
-
public/images/i.jpg —> /images/1.jpg
-
public/css/base.css —> /css/base.css
- 通过 Head 组件修改元数据
// pages/index.js
import Head from 'next/head'
export default function Home() {
return (<>
index page</>)
}
// pages/index.js
import Head from 'next/head'
export default function List () {
return (<>
list page</>)
}
内置 styled-jsx
在 Next.js 中内置了 styled-jsx，它是一个 CSS-in-JS 库，允许在 React 组件中编写 CSS，CSS 仅作用于组件内部
// pages/index.js
export default function Home() {
return (<>
index page works
</>)
}
CSS 模块
-
通过使用 CSS 模块功能，允许将组建的 CSS 样式编写在单独的 CSS 文件中。
-
CSS 模块约定样式文件的名称必须为 “组件文件名称.module.css”
// pages/list.js
import styles from './list.module.css'
export default function List () {
return (
}
全局样式文件
-
在 pages 文件夹中新建 _app.js 文件，并加入如下代码
-
在项目根目录下创建 styles 文件夹，并在其中创建 global.css
-
在 _app.js 中通过 import 引入 global.css
-
重新启动开发服务器
// pages/_app.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
// styles/global.css
body {
background-color: pink;
}
=============================================================
-
预渲染是指数据和 HTML 的拼接在服务器端提前完成
-
预渲染可以使 SEO 更加友好
-
预渲染会带来更好的用户体验，可以无需运行 JS 即可查看应用程序 UI
在 Next.js 中支持两种形式的预渲染：静态生成和服务端渲染
-
静态生成和服务端渲染是生成 HTML 的时机不同
-
静态生成：静态生成是在构建时生成 HTML，以后的每个请求都公用构建时生成好的 HTML
-
服务端渲染：服务端渲染是在请求时生成 HTML，每个请求都会重新生成 HTML
-
Next.js 允许开发者为每个页面选择不同的与渲染方式，不同的预渲染方式拥有不同的特点，应根据常见进行渲染，但建议大多数页面使用静态生成
-
静态生成页面以此构建反腐使用，访问速度快，因为页面都是事先生成好的
-
适用场景：
-
营销页面、博客文章、电子商务产品列表、帮助和文档
-
服务端渲染访问速度不如静态生成块，但是由于每次请求都会重新渲染，所以适用数据频繁更新的页面或页面内容随请求变化而变化的页面
-
无数据和有数据的静态生成
-
如果组件不需要在其他地方获取数据，直接进行静态生成
-
如果组件需要在其他地方获取数据，在构建时 Next.js 会预先获取组件需要的数据，然后再对组件进行静态生成
静态生成 getStaticProps
-
getStaticProps 方法的作用是获取组件静态生成需要的数据，并通过 props 的方式将数据传递给组件
-
该方法是一个异步函数，需要在组件内部进行导出
-
在发开模式下，getStaticProps 改为在每个请求上运行
export async function getStaticProps () {
// 从文件系统，API，数据库中获取的数据
const data = ...
// props 属性的值将会传递给组件
return {
props: ...
}
}
基础学习：
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计：HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互：JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
