Next.js App Router 经验总结
· 阅读需 8 分钟
写了很多 Next.js 的代码,总结了一下 Server Component 和 Client Component 的规律,希望对后来者有用。如果有错误,欢迎大佬指正!
写了很多 Next.js 的代码,总结了一下 Server Component 和 Client Component 的规律,希望对后来者有用。如果有错误,欢迎大佬指正!
不知道大家有没有遇到过这样的问题,就是在 Next.js 中使用暗黑模式时,页面会闪烁一下,这是因为 Next.js 会在服务端渲染时并不知道用户是否选择了黑暗模式(比如我一般将这个变量存在 window.localStorage
里),所以所以在用户接收到页面之前,页面会先显示 一下默认的样式,然后再根据用户的选择来渲染暗黑模式的样式,这样就会导致页面闪烁。
在使用 CSS in JS 的时候这种闪烁尤为明显,例如 MUI 的官网。一般网站都会默认使用亮色主题,但我又倾向于使用暗黑模式,所以经常看到这种闪烁。我认为这真的很影响用户体验,至少我自己看得很难受。
一直很好奇 React 官网的在线编辑器是如何实现的,于是稍微研究了一下,通过 TypeScript 和 Babel 实现在浏览器中编译 React。
这个项目本身也是使用 TypeScript, Webpack 和 Babel 构建的,源码在 react-online - Skyone Git。