const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
  Loading...

2. กลยุทธ์การแคช (Caching)

การแคชฝั่งเซิร์ฟเวอร์: แคช HTML ที่เรนเดอร์แล้วบนเซิร์ฟเวอร์เพื่อลดภาระของเซิร์ฟเวอร์และปรับปรุงเวลาในการตอบสนอง ควรใช้การแคชในระดับต่างๆ เช่น:

• การแคชระดับหน้า (Page-level caching): แคชผลลัพธ์ HTML ทั้งหมดสำหรับ URL ที่ระบุ
• การแคชส่วนย่อย (Fragment caching): แคชคอมโพเนนต์หรือส่วนต่างๆ ของหน้าเว็บ
• การแคชข้อมูล (Data caching): แคชข้อมูลที่ใช้ในการเรนเดอร์หน้าเว็บ

การแคชฝั่งไคลเอนต์: ใช้ประโยชน์จากการแคชของเบราว์เซอร์เพื่อจัดเก็บเนื้อหาคงที่ (static assets) เช่น JavaScript, CSS และรูปภาพ กำหนดค่า cache headers ที่เหมาะสมเพื่อควบคุมระยะเวลาในการแคชเนื้อหาเหล่านี้

CDN (Content Delivery Network): กระจายเนื้อหาคงที่ของคุณไปยังเครือข่ายเซิร์ฟเวอร์ทั่วโลกเพื่อปรับปรุงเวลาในการโหลดสำหรับผู้ใช้ทั่วโลก CDN ยังสามารถแคชเนื้อหาแบบไดนามิกได้ ซึ่งช่วยลดภาระบนเซิร์ฟเวอร์ต้นทางของคุณได้อีก

ตัวอย่าง (การใช้ Redis สำหรับการแคชฝั่งเซิร์ฟเวอร์):

            
const redis = require('redis');
const client = redis.createClient();

async function renderPage(req, res) {
 const cacheKey = `page:${req.url}`;

 client.get(cacheKey, async (err, cachedHtml) => {
 if (err) {
 console.error(err);
 }

 if (cachedHtml) {
 res.send(cachedHtml);
 return;
 }

 const html = await generateHtml(req);

 client.setex(cacheKey, 3600, html); // Cache for 1 hour
 res.send(html);
 });
}

            

              
                Copy
              
            
          

3. การเพิ่มประสิทธิภาพการดึงข้อมูล (Data Fetching)

การดึงข้อมูลแบบขนาน (Parallel Data Fetching): ดึงข้อมูลพร้อมกันเพื่อลดเวลาในการโหลดข้อมูลโดยรวม ใช้ `Promise.all` หรือเทคนิคที่คล้ายกันเพื่อดึงข้อมูลจากหลายแหล่งพร้อมกัน

การรวมกลุ่มข้อมูล (Data Batching): รวมคำขอข้อมูลหลายรายการเป็นคำขอเดียวเพื่อลดจำนวนการเดินทางของเครือข่าย (network round trips) ซึ่งมีประโยชน์อย่างยิ่งเมื่อดึงข้อมูลที่เกี่ยวข้องกันจากฐานข้อมูลหรือ API

GraphQL: ใช้ GraphQL เพื่อดึงเฉพาะข้อมูลที่จำเป็นสำหรับคอมโพเนนต์ที่ระบุ ซึ่งจะช่วยหลีกเลี่ยงการดึงข้อมูลมากเกินไป (over-fetching) และลดปริมาณข้อมูลที่ถ่ายโอนผ่านเครือข่าย

ตัวอย่าง (การใช้ `Promise.all`):

            
async function fetchData() {
 const [user, posts, comments] = await Promise.all([
 fetch('/api/user').then(res => res.json()),
 fetch('/api/posts').then(res => res.json()),
 fetch('/api/comments').then(res => res.json()),
 ]);

 return { user, posts, comments };
}

            

              
                Copy
              
            
          

4. การรัน JavaScript อย่างมีประสิทธิภาพ

ลดขนาด JavaScript: ลดปริมาณโค้ด JavaScript ที่ต้องดาวน์โหลดและรัน ลบโค้ดที่ไม่ได้ใช้, บีบอัดไฟล์ JavaScript (minify) และใช้ code splitting เพื่อโหลดเฉพาะโค้ดที่จำเป็น

เพิ่มประสิทธิภาพของ JavaScript: ใช้อัลกอริทึมและโครงสร้างข้อมูลที่มีประสิทธิภาพเพื่อลดเวลาการทำงานของโค้ด JavaScript ใช้เครื่องมือโปรไฟล์ (profile) โค้ดของคุณเพื่อระบุปัญหาคอขวดด้านประสิทธิภาพและปรับปรุงให้เหมาะสม

Web Workers: ย้ายงานที่ต้องใช้การประมวลผลสูงไปยัง Web Workers เพื่อป้องกันการบล็อกเธรดหลัก ซึ่งจะช่วยปรับปรุงการตอบสนองของส่วนติดต่อผู้ใช้

Tree Shaking: กำจัดโค้ดที่ไม่ได้ใช้ออกจากบันเดิล JavaScript ของคุณ Webpack และ bundler อื่นๆ รองรับ tree shaking ซึ่งสามารถลดขนาดบันเดิลของคุณได้อย่างมาก

5. การเพิ่มประสิทธิภาพ Hydration

Partial Hydration: ทำ hydration เฉพาะคอมโพเนนต์ที่ต้องโต้ตอบได้ของหน้าเว็บ โดยปล่อยให้เนื้อหาคงที่ (static content) ไม่ถูก hydrate ซึ่งจะช่วยลดปริมาณ JavaScript ที่ต้องรันและปรับปรุงเวลาในการโหลดเริ่มต้น

Progressive Hydration: ทำ hydration คอมโพเนนต์ตามลำดับที่กำหนด โดยเริ่มจากคอมโพเนนต์ที่สำคัญที่สุด ซึ่งจะช่วยให้ผู้ใช้สามารถโต้ตอบกับส่วนที่สำคัญที่สุดของหน้าเว็บได้เร็วขึ้น

กำจัด Hydration Mismatches: ตรวจสอบให้แน่ใจว่า HTML ที่เรนเดอร์จากเซิร์ฟเวอร์และ JavaScript ฝั่งไคลเอนต์มีความสอดคล้องกันเพื่อหลีกเลี่ยง hydration mismatches ความไม่สอดคล้องกันเหล่านี้อาจนำไปสู่การกระพริบหรือข้อผิดพลาดและส่งผลเสียต่อประสิทธิภาพ

ตัวอย่าง (การใช้ `useDeferredValue` ของ React สำหรับ progressive hydration):

            
import { useState, useDeferredValue } from 'react';

function SearchInput() {
 const [query, setQuery] = useState('');
 const deferredQuery = useDeferredValue(query);

 return (
  

    setQuery(e.target.value)} />
   
  
 );
}

            

              
                Copy
              
            
          

6. การเพิ่มประสิทธิภาพเฉพาะ Framework

แต่ละ JavaScript framework มีการเพิ่มประสิทธิภาพเฉพาะสำหรับ SSR ของตัวเอง นี่คือตัวอย่างบางส่วน:

• React: ใช้ `ReactDOMServer.renderToString` สำหรับการเรนเดอร์เป็น HTML แบบคงที่ ใช้ `React.memo` และ `useMemo` สำหรับการทำ memoization คอมโพเนนต์
• Angular: ใช้ Angular Universal สำหรับ SSR เพิ่มประสิทธิภาพการตรวจจับการเปลี่ยนแปลง (change detection) และใช้การคอมไพล์แบบ Ahead-of-Time (AOT)
• Vue.js: ใช้ Vue Server Renderer สำหรับ SSR เพิ่มประสิทธิภาพการเรนเดอร์คอมโพเนนต์และใช้ lazy loading สำหรับคอมโพเนนต์และ routes
• Next.js: Next.js เป็น React framework ที่ออกแบบมาสำหรับ SSR โดยเฉพาะ มีการสนับสนุนในตัวสำหรับ SSR, code splitting และ routing
• Nuxt.js: Nuxt.js เป็น Vue.js framework ที่ออกแบบมาสำหรับ SSR โดยเฉพาะ มีการสนับสนุนในตัวสำหรับ SSR, code splitting และ routing

เครื่องมือสำหรับการเพิ่มประสิทธิภาพ SSR

มีเครื่องมือหลายอย่างที่สามารถช่วยคุณเพิ่มประสิทธิภาพของ SSR:

• Google PageSpeed Insights: วิเคราะห์ประสิทธิภาพของเว็บไซต์และระบุส่วนที่ควรปรับปรุง
• WebPageTest: ทดสอบประสิทธิภาพของเว็บไซต์จากสถานที่และสภาพเครือข่ายที่แตกต่างกัน
• Lighthouse: เครื่องมืออัตโนมัติแบบโอเพนซอร์สสำหรับปรับปรุงคุณภาพของหน้าเว็บ มีการตรวจสอบด้านประสิทธิภาพ, การเข้าถึง, progressive web apps, SEO และอื่นๆ
• Webpack Bundle Analyzer: แสดงภาพขนาดของบันเดิล JavaScript และระบุโอกาสในการทำ code splitting
• New Relic, Datadog, Sentry: เครื่องมือตรวจสอบประสิทธิภาพของแอปพลิเคชันเพื่อระบุและวินิจฉัยปัญหาด้านประสิทธิภาพในแอปพลิเคชันของคุณ รวมถึงปัญหาคอขวดในการเรนเดอร์ฝั่งเซิร์ฟเวอร์

ตัวอย่างการใช้งาน SSR

นี่คือตัวอย่างบางส่วนของการนำ SSR ไปใช้ใน JavaScript framework ต่างๆ:

React กับ Next.js

Next.js ทำให้ SSR ง่ายขึ้นโดยให้การสนับสนุนในตัวสำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ หน้าต่างๆ ในไดเรกทอรี `pages` จะถูกเรนเดอร์ฝั่งเซิร์ฟเวอร์โดยอัตโนมัติ

            
// pages/index.js

function HomePage(props) {
 return (
  

   
Welcome to my website!
   
Data from server: {props.data}
  
 );
}

export async function getServerSideProps(context) {
 const data = await fetchData();
 return {
  props: { data }, // will be passed to the page component as props
 };
}

export default HomePage;

            

              
                Copy
              
            
          

Vue.js กับ Nuxt.js

Nuxt.js มอบประสบการณ์ที่คล้ายคลึงกับ Next.js สำหรับแอปพลิเคชัน Vue.js ทำให้ SSR ง่ายขึ้นและให้การสนับสนุนในตัวสำหรับ routing, code splitting และอื่นๆ

            
// pages/index.vue





            

              
                Copy
              
            
          

Angular กับ Angular Universal

Angular Universal เปิดใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์สำหรับแอปพลิเคชัน Angular ซึ่งต้องมีการกำหนดค่ามากกว่า Next.js หรือ Nuxt.js แต่ก็เป็นโซลูชันที่ทรงพลังสำหรับ SSR

1. ติดตั้ง Angular Universal: `ng add @nguniversal/express-engine`
2. กำหนดค่าเซิร์ฟเวอร์: แก้ไขไฟล์ `server.ts` เพื่อจัดการการเรนเดอร์ฝั่งเซิร์ฟเวอร์
3. รันแอปพลิเคชัน: `npm run dev:ssr`

สรุป

Server-Side Rendering เป็นเทคนิคที่ทรงพลังสำหรับการปรับปรุงประสิทธิภาพและ SEO ของเว็บแอปพลิเคชันที่สร้างด้วย JavaScript framework ด้วยการเรนเดอร์ HTML ล่วงหน้าบนเซิร์ฟเวอร์ SSR สามารถลดเวลาในการโหลดเริ่มต้นได้อย่างมีนัยสำคัญ เพิ่มการมองเห็นในเครื่องมือค้นหา และปรับปรุงประสบการณ์ผู้ใช้โดยรวม แม้ว่า SSR จะเพิ่มความซับซ้อนให้กับกระบวนการพัฒนา แต่ประโยชน์ที่ได้รับมักจะคุ้มค่ากว่าความท้าทาย ด้วยการใช้เทคนิคการเพิ่มประสิทธิภาพที่ระบุไว้ในคู่มือนี้ นักพัฒนาสามารถใช้ประโยชน์จากพลังของ SSR เพื่อสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพสูง เป็นมิตรกับ SEO และมอบประสบการณ์ผู้ใช้ที่เหนือกว่าในระดับโลก ควรพิจารณาเคล็ดลับเหล่านี้ไม่ใช่แค่การแก้ไขครั้งเดียว แต่เป็นส่วนหนึ่งของกระบวนการที่ต่อเนื่อง เว็บมีการพัฒนาอยู่ตลอดเวลา และกลยุทธ์การเพิ่มประสิทธิภาพของคุณก็ควรปรับเปลี่ยนตามไปด้วย

อย่าลืมโปรไฟล์แอปพลิเคชันของคุณอย่างสม่ำเสมอและปรับเทคนิคการเพิ่มประสิทธิภาพตามความจำเป็น นอกจากนี้ โปรดจำไว้ว่าแนวทางที่ดีที่สุดสำหรับ SSR จะแตกต่างกันไปขึ้นอยู่กับความต้องการเฉพาะของแอปพลิเคชันของคุณ ทดลองใช้เทคนิคต่างๆ และค้นหาสิ่งที่เหมาะสมที่สุดสำหรับสถานการณ์ของคุณ อย่ากลัวที่จะทำการทดสอบ A/B กับการเพิ่มประสิทธิภาพต่างๆ เพื่อวัดผลกระทบต่อประสิทธิภาพและประสบการณ์ของผู้ใช้ และสุดท้าย ติดตามข่าวสารเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดล่าสุดใน SSR และการเพิ่มประสิทธิภาพของฟรอนต์เอนด์อยู่เสมอ ภูมิทัศน์การพัฒนาเว็บมีการเปลี่ยนแปลงอยู่ตลอดเวลา และเป็นสิ่งสำคัญที่จะต้องเรียนรู้และปรับตัวเข้ากับเทคโนโลยีและเทคนิคใหม่ๆ ต่อไป