SSR支持
在Next.js等SSR场景下,客户端脚本会延后加载,页面初次渲染时目录联动会失效。...getInitialProps注水
可以在getInitialProps中提前计算目录数据,注入到页面中:
Home.getInitialProps = async () => {
const chapters...但是在Next.js的SSR环境下就会有问题:
点击目录链接时,页面不会滚动。
这是因为在服务端,我们无法获取组件的ref,所以锚点元素不存在,自然无法定位。
滚动页面时,目录高亮也失效。...服务端渲染的静态HTML中,并没有绑定滚动事件,所以无法自动高亮。
预取数据
首先,我们需要解决点击目录链接的问题。
既然服务端无法获取组件ref,那就需要在客户端去获取元素位置。...简单来说就是:
在服务端渲染时,读取路由参数,提前计算高亮状态
将高亮数据注入到响应中
客户端拿到注水的数据后渲染,不会出现高亮错位
实现步骤:
1.服务端获取参数和数据
// 在getServerSideProps