Next JS : React Framework ที่ชาว Front-end ต้องลองใช้

Overview

วันนี้จะมาแชร์ Next JS สิ่งที่ใช้ และ แนวทางการใช้เบื้องต้นครับ

Introduction
Getting Started
CSR SSR SSG
แนวทางใช้ SSR ใน NextJS
แนวทางใช้ SSG ใน NextJS
References

Introduction

Next JS เป็น React Framework ตัวหนึ่งที่พัฒนาขึ้นมาเพื่อเพิ่มเติมส่วนที่ยังทำได้ไม่ดีใน React เช่น การทำ Server Side Rendering , Routing , Config ค่าง ๆ

Getting Started

สามารถสร้าง project ได้จาก command ด้านล่างเลยครับ

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

โครงสร้างของ Project ก็จะประกอบด้วย

pages - เป็น folder ที่เก็บหน้าต่าง ๆ ในเว็บ โดยสามาถเข้าถึงหน้าจากชื่อของ file ได้เลย เช่น ชื่อไฟล์ product.js เข้าได้จาก localhost:3000/product เป็นต้น
pages/api - เป็น folder ที่เก็บตัว api ใน nextjs การเข้าถึง api ก็ทำเช่นเดียวกัน
_app.js - เป็น file หลักของ project กรณีที่มี Context Provider ต่างๆ เช่น Redux, Styled Component, React Query หรืออื่นๆ ก็เอามาครอบส่วนนี้
index.js - เป็นหน้าแรกของเว็บ
public - เก็บไฟล์ตั้งต้นทั่วไป
styles - เก็บ styles css ต่าง ๆ
next.config.js - ไฟล์เก็บ config ของ nextjs ทำหน้าที่คล้าย ๆ webpack

CSR SSR SSG

CSR - Client Side Rendering มันคือการที่หน้าเว็บโหลดข้อมูลมาจาก server แล้วนำข้อมูลนั้นมา render แล้วแสดงผลบนหน้าเว็บ โดยทุกกระบวนการนี้ทำอยู่บนเครื่องของ Client ทั้งหมด ถ้าเขียน React กรณีที่มีการใช้งาน useEffect ในการ fetch ข้อมูลมา ก็ถือว่าเป็น Client Side Rendering ทั้งนั้น

SSR - Server Side Rendering เมื่อเข้าสู่หน้าเว็บ หน้าเว็บจะส่ง Request ไปที่ Server ของ NextJS ก่อน จากนั้น Server ของ NextJS ก็จะไปขอข้อมูลจาก Server ของ API แล้ว Server ของ NextJS ก็นำข้อมูลที่ได้มา Render ให้เสร็จแล้วค่อยส่งข้อมูลที่ Render เรียบร้อยกลับไปยังเครื่องของ Client

SSG - Static Side Generate เป็นการที่เมื่อเรา Build ตัวเว็บของเรา กรณีที่ต้องใช้ข้อมูลจาก API Server จังหวะที่ทำการ Build จะ Request ไปขอข้อมูลเอามาจัดเตรียมไว้ก่อน แล้วสร้างเป็นไฟล์ html ของเนื้อหาแต่ละหน้าเตรียมเก็บไว้ เมื่อผู้ใช้งานมีการเข้ามาหน้าเว็บไซต์หน้านั้นๆ ก็แค่ส่งไฟล์ html นั้นตอบกลับไปทันที

โดยทั้งหมดนี้ใน NextJS เราสามารถ Custom ได้ บางหน้าอยากใช้ CSR บางหน้าอยากใช้ SSR บางหน้าอยากใช้ SSG ก็สามารถจัดการได้อย่างสะดวก แต่ควรใช้ให้เหมาะสมกับจุดประสงค์ของหน้านั้น ๆ ด้วยเช่นกัน

แนวทางใช้ SSR ใน NextJS

getServerSideProps - ฟังก์ชันนี้จะทำหน้าที่ส่ง Request ไปหา Server API ก่อน แล้วส่งข้อมูลต่อเป็น props ไปยัง Page

index.js

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

แนวทางใช้ SSG ใน NextJS

getStaticPaths - ฟังก์ชันนี้จะทำหน้าที่ส่ง Request ไปหา Server API ก่อน แล้วดูว่าเนื้อหาใน API จะมี dynamic route ทั้งหมดกี่หน้า

post.js

// pages/posts/[id].js

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}

// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  }
}

export default function Post({ post }) {
  // Render post...
}

getStaticProps - ทำหน้าที่คล้ายๆ getServerSideProps ของ SSR คือจะ Request ข้อมูลมาจาก Server API ก่อน แล้วส่ง props ไปยัง Page

blog.js

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog