标签: pre-rendering

我认为预渲染过程意味着像 useEffect 这样的钩子已经在服务器上执行了。

我读过一些关于水合作用的内容，不知道它是否解释了这种现象，但无法从解释该术语的博客中清楚地理解它。

我正在尝试使用React-snap包预渲染我的 vite React 应用程序。

我已经尝试使用以下代码进行预渲染的过程。但它没有在生产中构建（我配置了 GitHub 操作以进行部署）。

const Main = (
    <React.StrictMode>
        <BrowserRouter>
            <Suspense fallback={<Loader />}>
                <Provider store={store}>
                    <App />
                </Provider>
            </Suspense>
        </BrowserRouter>
    </React.StrictMode>
);

const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
    ReactDOM.createRoot(rootElement).hydrate(Main);
} else {
    ReactDOM.createRoot(rootElement).render(Main);
}

也许我必须更改vite.config.js文件中的某些内容。

任何形式的帮助都会非常感激。

我正在开发 Angular 14 应用程序，并尝试制作带有动态路线的 Twitter 卡。案例如下：

1. 我有一个在线商店，显示不同的产品，显然是相同的路线，只是通过路线中的参数更改产品信息

   {
     path: 'product/:id',
     component: ProductLayoutComponent,
     children: [{ path: '',  loadChildren: () => import('./pages/section-custom/modules/product/product.module').then(m => m.ProductComponent) },  ]
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 该页面有两个按钮用于在 Facebook 和 Twitter 上分享产品的链接，这里是代码

   productId: string;
   constructor(public activatedRoute: ActivatedRoute) {
     this.activatedRoute.params.subscribe((params) => {   this.productId = params['id']; });
   }
   
   shareFacebook() {
     const facebookshare = 'https://www.facebook.com/sharer/sharer.php?u=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   
   shareTwitter() {
     const facebookshare = 'https://twitter.com/intent/tweet?url=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. 每个产品都有自己的图像、标题和描述出现在 Twitter 卡片和 Facebook 帖子中，经过多天的研究，我了解到社交网络爬虫需要读取一些元标记才能正确显示帖子和卡片，所以当我加载时我的产品有这个功能：

    productId: string;
    constructor(public activatedRoute: ActivatedRoute: public http: HttpClient,  private …

   Run Code Online (Sandbox Code Playgroud)