reactSSR为什么只在第一次渲染的时候走路由？

Question

<StaticRouter location={url}>
    <Component initialData={data}/>
</StaticRouter>

这是renderToString的组件，为什么只在第一次进入的时候才走这个路由，其他貌似走的是前端路由

function AppRoute(props){
    return (
        <>
            <Switch>
                <Route path={'/baidu'} component={Baidu}></Route>
                <Route path={'/google'} component={Google}></Route>
                <Route path='/' component={Default} exact></Route>
            </Switch>
        </>
    )
}

function Default(){
    console.log('i am app route')
    return (
        <div>
            <Link to="/baidu">百度</Link>
            <Link to="/google">谷歌</Link>
        </div>
        )
}

所有的路由都只在浏览器刷新后打印消息（在服务端的控制台），而通过Link跳转的则全部没有在服务端console，却都在浏览器里console了，求解

Answer 1

服务端渲染的基本套路就是用户请求过来的时候，在服务端生成一个我们希望看到的网页内容的HTML字符串，返回给浏览器去展示。浏览器拿到了这个HTML之后，渲染出页面，但是并没有事件交互，这时候浏览器发现HTML中加载了一些js文件（也就是浏览器端渲染的js），就直接去加载。加载好并执行完以后，事件就会被绑定上了。这时候页面被加载的js接管了，也就是到了我们熟悉的js渲染页面的过程。所以之后的路由跳转都是前端实现的

Answer 2

vue 和 React 的服务端渲染的原理是一样的，只有在首屏的时候才会有服务端渲染，意思就是这个页面里所有的资源数据都是服务端渲染出来，再换句话说，就是页面的 DOM 结构是服务端帮你生成的。
当你在页面(单页面)进行路由跳转的时候，这个时候的路由是前端控制的，也就是说，此时的页面的 DOM 结构是由 script 脚本帮你生成的，所以这个时候的页面渲染跟服务端就没关系了。

我之前写了一个非常详细的 React SSR 的教程，感兴趣可以看一下 React 服务端渲染