มันเป็น 2 วิธีในการสร้างแอปพลิเคชันแยกกันหรือสามารถใช้ร่วมกันได้หรือไม่?
สามารถใช้ร่วมกันได้
หากเราสามารถใช้ร่วมกันได้จะต้องทำอย่างไร - เราต้องทำซ้ำองค์ประกอบเดียวกันในฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์หรือไม่? หรือเราสามารถสร้างส่วนคงที่ของแอปพลิเคชันของเราบนเซิร์ฟเวอร์และชิ้นส่วนไดนามิกในฝั่งไคลเอ็นต์โดยไม่ต้องเชื่อมต่อกับฝั่งเซิร์ฟเวอร์ที่แสดงผลล่วงหน้าแล้วได้หรือไม่?
ควรมีการแสดงเค้าโครงเดียวกันเพื่อหลีกเลี่ยงการดำเนินการจัดเรียงใหม่และทาสีใหม่การกะพริบ / กะพริบน้อยลงหน้าของคุณจะราบรื่นขึ้น อย่างไรก็ตามไม่ใช่ข้อ จำกัด คุณสามารถแคช SSR html ได้เป็นอย่างดี (สิ่งที่อิเล็กโทรดทำเพื่อลดเวลาตอบสนอง) / ส่ง html แบบคงที่ซึ่งถูกเขียนทับโดย CSR (การเรนเดอร์ฝั่งไคลเอ็นต์)
หากคุณเพิ่งเริ่มต้นด้วย SSR ฉันขอแนะนำให้เริ่มง่ายๆ SSR สามารถซับซ้อนได้อย่างรวดเร็ว ในการสร้าง html บนเซิร์ฟเวอร์หมายถึงการสูญเสียการเข้าถึงอ็อบเจ็กต์เช่นหน้าต่างเอกสาร (คุณมีสิ่งเหล่านี้ในไคลเอนต์) สูญเสียความสามารถในการรวมการดำเนินการแบบ async (นอกกรอบ) และโดยทั่วไปการแก้ไขโค้ดจำนวนมากเพื่อให้เข้ากันได้กับรหัส SSR ของคุณ ( เนื่องจากคุณจะต้องใช้ webpack เพื่อแพ็ค bundle.js ของคุณ) สิ่งต่างๆเช่นการนำเข้า CSS ต้องการเทียบกับการนำเข้าก็เริ่มกัดคุณ (นี่ไม่ใช่กรณีในแอป React เริ่มต้นที่ไม่มี webpack)
รูปแบบทั่วไปของ SSR มีลักษณะดังนี้ เซิร์ฟเวอร์ Express ที่ให้บริการคำขอ:
const app = Express();
const port = 8092;
// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
console.log('fullUrl: ', fullUrl);
console.log('req.url: ', req.url);
// Create a new Redux store instance
const store = createStore(reducerFn);
const urlToRender = req.url;
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={urlToRender} context={{}}>
{routes}
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
// Grab the initial state from our Redux store
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(helmet, html, preloadedState));
}
ข้อเสนอแนะของฉันสำหรับคนที่เริ่มต้นด้วย SSR คือการให้บริการ HTML แบบคงที่ คุณสามารถรับ html แบบคงที่ได้โดยเรียกใช้แอป CSR SPA:
document.getElementById('root').innerHTML
อย่าลืมเหตุผลเดียวในการใช้ SSR ควรเป็น:
- SEO
- โหลดเร็วขึ้น (ฉันจะลดราคานี้)
แฮ็ค: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
