서버 사이드 렌더링을 위한 Node.js 최신 기술 🚀

서버 사이드 렌더링(SSR)은 웹 페이지의 로딩 속도를 개선하고, 검색 엔진 최적화(SEO)에 도움을 줍니다. Node.js를 사용한 SSR은 웹 개발자들 사이에서 인기가 높아지고 있습니다. 오늘은 Node.js에서 SSR을 구현하는 몇 가지 최신 기술을 소개하겠습니다.

1. Next.js 사용하기

Next.js는 서버 사이드 렌더링을 쉽게 구현할 수 있게 해주는 React 프레임워크입니다. 페이지를 미리 렌더링하여 사용자에게 빠르게 제공할 수 있습니다.

// pages/index.js
function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage;

위 코드는 Next.js를 사용하여 간단한 홈페이지를 만드는 예시입니다. Next.js는 설정이 거의 필요 없어 빠르게 프로젝트를 시작할 수 있습니다.

2. Express.js와 함께 EJS 템플릿 사용하기

Express.js는 Node.js의 가장 인기 있는 웹 프레임워크 중 하나입니다. EJS는 JavaScript를 사용하여 HTML 마크업을 생성하는 간단한 템플릿 엔진입니다. Express와 EJS를 결합하면, 서버 사이드 렌더링을 쉽게 구현할 수 있습니다.

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { title: 'Hello World!' });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

위 코드는 Express와 EJS를 사용하여 "Hello World!"를 표시하는 간단한 웹 페이지를 만듭니다.

3. 데이터 페칭과 상태 관리

SSR에서는 클라이언트 사이드에서만 데이터를 페칭하는 것이 아니라, 서버 사이드에서도 데이터를 미리 페칭하여 렌더링할 수 있습니다. 이를 통해 사용자에게 더 빠른 페이지 로딩 경험을 제공할 수 있습니다.

Next.js에서는 getServerSideProps 함수를 사용하여 서버 사이드에서 데이터를 페칭할 수 있습니다.

// pages/posts.js
export async function getServerSideProps(context) {
  const res = await fetch(`https://example.com/posts`);
  const data = await res.json();

  return {
    props: { posts: data }, // 페이지에 props로 전달됩니다.
  };
}

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;

이 코드는 서버 사이드에서 데이터를 페칭하여 포스트 목록을 렌더링하는 예시입니다.

서버 사이드 렌더링은 웹 개발에서 중요한 기술입니다. Node.js와 함께 최신 기술을 활용하여 사용자에게 더 나은 웹 경험을 제공해보세요.