반응형 SSR3 next에서 styled-component에 SSR 적용하는 방법 Styled-component와 Next styled-component는 CSS-in-JS이다. 즉 JS를 통해서 CSS를 작성할 수 있게 도와주는 라이브러리이다. 한편 SSR은 자바스크립트가 실행되기 전, 서버에서 만들어준 html을 미리 렌더링하는 방식이고 Next.js는 React를 SSR로 렌더링 할 수 있게 만들어주는 프레임워크이다. 그럼 next에서 CSS-in-JS인 styled-component로 무언가를 작성했을때, 어떻게 SSR로 렌더링시킬 수 있을까?? .babelrc 설정 .babelrc 는 하위디렉토리나 파일에서 특정 플러그인이나 특정 규칙을 실행할 때 사용한다. (bebel 잘 설명해 놓은 블로그 참고) 예를 들어 특정 플러그인이 프로젝트내에서 트랜스파일링되지 않거나 특정 규칙으.. 2023. 6. 1. Nest로 SSR하기 (+MVC) npm i -g @nestjs/cli nest new project 먼저 nest로 새로운 프로젝트를 만들자. 그 후, hbs라는 라이브러리를 깔아야 한다. hbs는 대충 SSR을 위한 라이브러리라 생각하자. 하다보면 알게된다. npm install --save hbs 그 후 main.ts를 다음과 같이 작성한다. import { NestFactory } from '@nestjs/core'; import { NestExpressApplication } from '@nestjs/platform-express'; import { join } from 'path'; import { AppModule } from './app.module'; async function bootstrap() { const app .. 2022. 6. 24. Pre-rendering (직접 실험하면서 확인) Next.js의 장점중 하나는 Pre-rendering 된다는 것이다. Pre-render를 통해 얻을 수 있는 장점은 다음과 같다. UX향상 SEO 향상(SEO는 초기 HTML의 meta 태그를 분석) CSR - 리액트 Create-react-app으로 만든 앱의 경우, 브라우저가 UI를 만드는 client-side-render를 한다. 즉 UI가 HTML 코드에 들어있지 않다는 것이다. Create-react-app으로 만든 앱의 경우 바디태그에는 이외에는 전부 자바스크립트이다. 위를 보면 사실상 비어있는 body태그이다. create-react-app으로 만든 페이지가 있다면 네트워크 탭에서 통신속도를 느린3G로 설정하고 새로고침을 해보자. 처음에는 하얀화면만 보이다가 서서히 구성요소들이 렌더링되는.. 2022. 1. 27. 이전 1 다음 반응형
