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