[Sveltekit] +page.js와 +page.server.js 설정

1. +page.js

Sveltekit에는 각 페이지마다 환경을 설정할 수 있는 +page.js라는 파일을 만들 수 있습니다.

 

schedule이라는 페이지의 컴포넌트와 같은 레벨에 +page.js를 넣어주면 되는데요, 여기서 설정할 수 있는 것들을 대표적인 것만 짧게 소개해 드리겠습니다.

 

- SSR, CSR 방식 선택

Sveltekit은 속도를 빠르게 하기 위해 초기 페이지 렌더링 시에는 SSR, 그 후에는 CSR로 동작한다고 저번 포스팅에서 다룬 바 있습니다. 그래서 기본적으로 두 가지 방식이 모두 사용되고 있는데요, +page.js에서는 이 둘 중 하나만 사용하도록 할 수 있습니다.

 

export const ssr = false;

간단히 위 한 줄만 입력하면 페이지를 CSR 방식으로만 동작하도록 할 수 있습니다.

 

참고로 ssr을 false로 하면 앱이 서버에서 렌더링되지 않고, 무조건 빈 HTML을 받아온 뒤 클라이언트에서 렌더링합니다.

csr을 false로 하면 자바스크립트를 사용할 수 없어 정적인 페이지로만 동작합니다.

 

둘다 잘 쓰이진 않는 세팅이지만, SSR과 CSR의 특성을 복습하기도 할 겸 소개해 드렸습니다.

 

 

- Universal Load Function

API 호출 등, 렌더링 전에 미리 실행하고 싶은 작업이 있다면 사용하는 함수입니다. 이 또한 +page.js에 정의 가능합니다.

 

아래와 같이 +page.js에 정의해 보았습니다. 함수 이름은 load()여야 하며, 비동기 async 함수로 정의합니다. 리턴값은 무조건 객체여야 합니다.

 

이 함수에서 로그를 찍어 보면 특징이 있습니다.

바로 페이지 새로고침 시 서버, 브라우저 두 군데 모두 로그가 찍히지만, 그 이후로는 브라우저에서만 로그가 찍힙니다.

 

어떤 특징일까요? 바로 첫 동작시 SSR, 그 이후로는 CSR을 사용하는 Universal Rendering의 특징입니다.

 

 

Universal Load Function에서 리턴한 값은 위와 같이 export let data; 로 받습니다. data 객체 안에 리턴값인 객체가 들어 있습니다.

 

 

2. +page.server.js

+page.server.js에서도 +page.js처럼 ssr, csr 설정을 할 수 있고, load() 함수를 정의할 수 있습니다. 그런데 +page.js에서의 load() 함수와 동작이 살짝 다릅니다.

 

+page.server.js에서 정의한 load() 함수는 Server Load Function이라고 합니다.

형태와 데이터 사용법은 Universal Load Function과 완전히 동일합니다.

 

그러나, 이 함수에서 로그를 찍어 보면 브라우저에서는 찍히지 않고 서버에서만 찍히는 것을 볼 수 있는데요, 이를 통해 Server Load Function은 서버에서만 동작한다는 것을 알 수 있습니다.

 

이것은 무엇을 의미할까요?

Secret Key가 필요한 API 요청, DB 접근 등 클라이언트에 표시되면 안 되는 민감한 정보를 필요로 할 때 쓸 수 있는 함수라는 뜻입니다.

 

 

---

이번 포스팅은 +page.js와 +page.server.js에 대해 알아봤습니다.

그러고 보니 저번 포스팅이 딱 100개째더라구요?

방문자 수는 매우 저조하지만... 블로그 포스팅은 스스로 반성하고 기록하는 의미에서 하는 거라 앞으로도 계속할 예정입니다.

읽어주셔서 감사합니다.