JavaScript 프레임워크를 사용한 서버 측 렌더링(SSR)

오늘날의 빠르게 변화하는 웹 개발 환경에서는 고성능의 검색 엔진 친화적인 웹사이트를 제공하는 것이 중요합니다. 이를 달성하는 효과적인 방법 중 하나는 서버 측 렌더링(SSR)을 이용하는 것입니다. 이 기사에서는 JavaScript 프레임워크를 사용하여 SSR을 구현하는 방법을 살펴보고 프로젝트에서 SSR의 모든 잠재력을 실현하는 데 도움이 되는 코드 예제, 설명 및 출력을 제공합니다.

서버 측 렌더링에 대해 알아보기

서버 측 렌더링에는 서버에서 HTML 콘텐츠를 생성하고 클라이언트에 전송하여 즉시 표시됩니다. 이 접근 방식은 브라우저가 서버에서 최소한의 HTML을 검색한 다음 JavaScript를 사용하여 클라이언트 측에 콘텐츠를 렌더링하는 클라이언트 측 렌더링(CSR)과 대조됩니다.

서버사이드 렌더링의 이점

• 성능 향상 − SSR은 서버가 사전 렌더링된 HTML을 클라이언트에 보내기 때문에 의미 있는 첫 번째 그리기까지의 시간을 최소화합니다. 이는 페이지 로드 시간을 개선하고 더 나은 사용자 경험을 제공합니다.

• SEO 최적화−검색 엔진은 서버 렌더링 페이지를 쉽게 크롤링하고 색인을 생성하여 검색 엔진 순위를 높이고 검색 가능성을 높일 수 있습니다.

• 소셜 미디어 공유 − 서버 렌더링 페이지는 소셜 미디어 플랫폼을 위한 풍부한 콘텐츠를 제공하여 공유 링크가 정확한 미리 보기를 표시하고 효과적으로 사용자 참여를 유도하도록 합니다.

JavaScript 프레임워크를 사용하여 서버 측 렌더링 구현

널리 사용되는 JavaScript 프레임워크를 사용하여 SSR을 실제로 구현하는 방법을 살펴보겠습니다.

React.js 및 Next.js

Create React App을 사용하여 새 React 프로젝트를 만듭니다. 터미널을 열고 다음 명령을 실행하세요 -

으아악

이렇게 하면 기본 React 프로젝트 구조가 포함된 my-ssr-app이라는 새 디렉터리가 생성됩니다.

프로젝트 디렉토리로 전환 -

으아악

Next.js를 종속성으로 설치 -

으아악

예

다음 코드를 사용하여 src/index.js 파일의 내용을 바꾸세요−

으아악

프로젝트의 src 디렉터리에 페이지라는 새 디렉터리를 만듭니다−

으아악

src/index.js 파일을 src/pages 디렉터리로 이동하세요−

으아악

package.json 파일을 열고 기존 "scripts" 섹션을 다음 코드로 바꿉니다.

으아악

변경 사항을 저장하고 터미널에서 다음 명령을 실행하여 개발 서버를 시작하세요. -

으아악

브라우저를 열고 http://localhost:3000으로 이동하세요.

출력

Vue.js 및 Nuxt.js

React와 유사하게 Vue.js는 Nuxt.js라는 강력한 SSR 프레임워크도 제공합니다.

터미널을 열고 다음 명령을 실행하여 새 Nuxt.js 프로젝트를 만듭니다. -

으아악

이렇게 하면 기본 Nuxt.js 프로젝트 구조가 포함된 my-ssr-app이라는 새 디렉터리가 생성됩니다.

프로젝트 디렉토리로 전환−

으아악

Example

pages/index.vue 파일을 열고 다음 코드가 포함된 기존 콘텐츠를 바꿉니다. −

으아악

변경 사항을 저장하면 개발 서버가 업데이트된 콘텐츠로 자동으로 다시 로드됩니다.

다음 명령을 실행하여 개발 서버를 시작하세요−

으아악

브라우저를 새로 고치고 http://localhost:3000을 방문하세요.

출력

Angular 및 Angular Universal

Angular는 서버 측 렌더링을 위해 Angular Universal을 제공하는 포괄적인 JavaScript 프레임워크입니다.

먼저 npm을 사용하여 Angular Universal을 설치하세요 −

으아악

Example

다음으로 새 파일 src/app/home.comComponent.ts를 만들고 다음 코드를 추가하세요 -

import { Component } from '@angular/core';

@Component({
   selector: 'app-home',
   template: `
      <div>
         <h1 id="Welcome-to-SSR-with-Angular-and-Angular-Universal">Welcome to SSR with Angular and Angular Universal!</h1>
      </div>
  `,
})
export class HomeComponent {}

使用以下代码更新 src/app/app.module.ts 文件 − p>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
   imports: [BrowserModule],
   declarations: [AppComponent, HomeComponent],
   bootstrap: [AppComponent],
})
export class AppModule {}

最后，运行以下命令启动开发服务器−

npm run dev:ssr

在浏览器中导航到 http://localhost:4000，您将看到服务器渲染的输出。

输出

结论

服务器端渲染在性能、SEO 和社交媒体共享方面提供了显着的优势。 React.js 与 Next.js、Vue.js 与 Nuxt.js 以及 Angular 与 Angular Universal 等 JavaScript 框架提供了强大的 SSR 解决方案。

通过利用 SSR 的强大功能，开发人员可以增强用户体验、提高搜索引擎可见性并提供高度优化的网站。通过本文中提供的代码示例和说明，您现在已经为在项目中使用 JavaScript 框架实现 SSR 奠定了坚实的基础。立即开始探索 SSR 并释放 Web 应用程序的全部潜力。

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