Next.js 및 JavaScript를 사용한 서버 측 렌더링(SSR)

웹 개발의 세계에서는 빠르고 원활한 사용자 경험을 제공하는 것이 중요합니다. 이를 달성하는 한 가지 방법은 웹 페이지를 클라이언트로 전송하기 전에 서버에서 렌더링할 수 있는 기술인 서버 측 렌더링(SSR)을 사용하는 것입니다. SSR은 향상된 성능, SEO 최적화, 더 나은 사용자 상호 작용 등 많은 이점을 제공합니다. 이 기사에서는 서버 렌더링 React 애플리케이션 구축에 널리 사용되는 JavaScript 프레임워크인 Next.js를 사용하여 SSR의 기본 사항을 살펴보겠습니다.

서버사이드 렌더링(SSR)이란 무엇입니까?

전통적으로 웹 애플리케이션은 JavaScript를 사용하여 브라우저에서 전체 렌더링 프로세스가 발생하는 클라이언트 측 렌더링에 의존해 왔습니다. 이 접근 방식은 소규모 애플리케이션에 적합하지만 초기 페이지 로드 속도가 느려지고 SEO 성능이 저하되며 접근성이 제한될 수 있습니다.

반면에 서버 측 렌더링에는 서버에서 완전한 HTML 콘텐츠를 생성하여 클라이언트로 보내는 작업이 포함됩니다. 그러면 클라이언트는 완전히 렌더링된 페이지를 수신하여 사용자에게 표시할 준비가 됩니다. 이 접근 방식을 사용하면 검색 엔진이 페이지를 보다 효율적으로 크롤링하고 사용자가 인지하는 성능을 향상시킬 수 있습니다.

Next.js를 소개합니다

Next.js는 내장된 서버 측 렌더링 기능을 제공하는 React 프레임워크입니다. 서버 측 설정 및 구성의 복잡성을 추상화하여 SSR 애플리케이션 구축 프로세스를 단순화합니다. Next.js는 또한 자동 코드 분할, 클라이언트 측 렌더링, 정적 사이트 생성과 같은 기능을 제공하므로 최신 웹 개발을 위한 다양한 선택이 가능합니다.

Next.js 프로젝트 설정

Next.js 사용을 시작하려면 Node.js가 컴퓨터에 설치되어 있는지 확인하세요. 프로젝트에 대한 새 디렉터리를 만들고 다음 명령을 사용하여 초기화하세요. -

으아악

이 명령은 필요한 파일과 종속성을 갖춘 새로운 Next.js 프로젝트를 설정합니다. -

를 실행하여 프로젝트 디렉터리로 이동합니다. 으아악

프로젝트 디렉터리에 진입한 후, 다음 명령어를 사용하여 개발 서버를 시작하세요 -

으아악

Next.js는 http://localhost:3000에서 로컬 개발 서버를 시작하고 브라우저에서 애플리케이션이 실행되는 것을 볼 수 있습니다.

서버측 렌더링 페이지 만들기

Next.js를 사용하면 서버 측 렌더링 페이지를 매우 쉽게 만들 수 있습니다. 프로젝트 구조에서 Pages 디렉터리로 이동하여 about.js라는 새 파일을 만듭니다. 이 파일은 애플리케이션의 /about 경로를 나타냅니다.

about.js에 다음 코드를 추가하세요 -

으아악

파일을 저장하고 Next.js 개발 서버가 실행 중인 경우 http://localhost:3000/about으로 이동하여 렌더링된 페이지를 볼 수 있습니다.

코드를 자세히 살펴보겠습니다. About 컴포넌트는 About 페이지의 내용을 나타내는 JSX를 반환하는 React 기능 컴포넌트입니다. 이 경우

제목과

단락이 포함된 요소를 렌더링합니다.

끝에 있는 내보내기 기본 About 문은 About 구성 요소를 기본 내보내기로 내보냅니다. 이를 통해 Next.js는 이를 서버 측 렌더링 페이지로 인식할 수 있습니다.

/about 경로에 액세스한 후 서버는 About 구성 요소를 렌더링하고 클라이언트는 페이지의 전체 HTML 표현을 수신합니다. 이 접근 방식을 사용하면 페이지가 사용자에게 전송되기 전에 완전히 렌더링되어 성능과 SEO가 향상됩니다.

동적 서버 측 렌더링

Next.js는 동적 서버 측 렌더링도 지원하므로 페이지를 렌더링하기 전에 외부 API에서 데이터를 가져오거나 서버 측 계산을 수행할 수 있습니다. 이를 통해 클라이언트 측 JavaScript에 의존하지 않고도 사용자에게 동적 콘텐츠를 제공할 수 있습니다.

동적 서버 측 렌더링을 시연하기 위해 모의 API에서 데이터를 가져오는 페이지를 만들어 보겠습니다. 페이지 디렉터리에서 users.js라는 새 파일을 만듭니다. -

으아악

지침

위 코드에서는 사용자 데이터를 소품으로 받는 기능적 구성 요소인 Users를 정의합니다. 수신된 데이터를 사용하여 사용자 목록을 렌더링합니다. getServerSideProps 함수는 외부 API(이 경우 https://api.example.com/users)에서 데이터를 가져오는 비동기 함수입니다.

getServerSideProps에서는 가져오기 기능을 사용하여 API에 HTTP 요청을 보내고 사용자 데이터를 검색합니다. 그런 다음 응답을 JSON으로 구문 분석하고 이를 사용자 변수에 할당합니다. 마지막으로 가져온 사용자 데이터가 포함된 props가 포함된 객체를 반환합니다.

사용자가 /users 경로에 액세스하면 Next.js는 서버에서 getServerSideProps 함수를 호출하여 데이터를 가져옵니다. 획득한 사용자 데이터는 렌더링을 위해 사용자 구성 요소에 소품으로 전달됩니다. 이렇게 하면 요청이 있을 때마다 페이지가 항상 최신 데이터로 렌더링됩니다.

동적 서버 측 렌더링은 데이터 기반 페이지를 구축하고 사용자에게 개인화된 콘텐츠를 제공할 수 있는 강력한 기능입니다. 서버에서 데이터를 가져옴으로써 성능을 최적화하고 다양한 장치 및 네트워크 조건에서 일관된 사용자 경험을 보장할 수 있습니다.

결론

Next.js 및 JavaScript를 사용한 서버측 렌더링(SSR)은 고성능 웹 애플리케이션을 구축하는 효율적인 방법을 제공합니다. Next.js의 서버 측 렌더링 기능을 활용함으로써 우리는 완전히 렌더링된 페이지를 사용자에게 제공하여 성능, 검색 엔진 가시성 및 전반적인 사용자 경험을 향상시킬 수 있습니다.

이 문서에서는 SSR을 소개하고 Next.js 프로젝트 설정을 안내하며 서버 측 렌더링 페이지를 만드는 방법을 보여줍니다. 우리는 서버 측 렌더링의 이점과 Next.js가 React 애플리케이션에서 SSR 구현 프로세스를 어떻게 단순화하는지 살펴보았습니다.

위 내용은 Next.js 및 JavaScript를 사용한 서버 측 렌더링(SSR)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!