SSR odnosno “Server-side rendering” (Kreiranje aplikacije od strane servera) nam omogućava generisanje HTML-a za stranice koje su dinamičke – čiji sadržaj nije poznat u trenutku građenja (building). Glavna karakteristika ovakve aplikacije je da ona može da bude pokrenuta i na klijentskoj strani (u pregledaču – “browser”) kao i na serverskoj strani.

Zašto SSR?

SSR aplikacije su postale popularne iz nekoliko vrlo bitnih razloga. Najbitniji razlog je svakako Google pretraga. Ukoliko je vaša JS aplikacija CSR, odnosno “Client-side rendered” aplikacija, svakako ćete teže doći na sam vrh Google pretrage. Pored toga, SSR ubrzava prikaz aplikacije, pa će tako korisnici sa sporijim internetom i starijim mobilnim uređajima imati dosta bolje iskustvo koristeći SSR aplikaciju.

Šta je Next.js, a šta Express?

Ukratko rečeno, Express je trenutno najpopularniji framework za Nodejs. Isto kao i Nodejs, koristi se na strani web server-a i široko se primenjuje zbog svoje brzine i minimalizma u kodu. Pomoću njega se vrlo lako kreiraju i veliki API-ji (Application Programming Interface).

Next.js je React framework koji ima više funkcionalnosti, a glavna mu je upravo kreiranje SSR aplikacija. Pored toga, uz pomoć ovog framework-a lako se prave i statični web sajtovi, mobile i web aplikacije, SEO-friendly sajtovi… Poseduje automatsko raspoređivanje koda što omogućava izuzetno brzo učitavanje stranica.

Korišćenje Next.js framework-a

Kako bi započeli kreiranje SSR aplikacije, prvi korak je uvek dodavanje potrebnih biblioteka i framework-a. Samim tim izradu svakog projekta sa Next.js framework-om započinjemo dodavanjem react, react-dom i next modula. Za tu priliku koristimo Yarn.

Prvo u praznom folderu pokrenemo inicijalizaciju potpuno novog node projekta i dodamo react, react-dom i next module (ova tri modula zajedno čine next).

yarn init
yarn add react react-dom next

Nakon prve komande, konzola će da traži da se unesu određene informacije, kao što su npr. ime aplikacije, verzija, autor itd. Sva pitanja mogu da se preskoče pritiskanjem tastera ENTER za svako pitanje posebno (svako pitanje već ima svoj default odgovor, a koje nema – odgovor nije obavezan).

Kako bi pokretali našu aplikaciju koristeći next framework, promenićemo package.json fajl i u skriptama dodati određene komande, odmah ispod “license”.

"scripts": {
 "dev": "next",
 "build": "next build",
 "start": "next start"
}.

Ovo znači da određenim komandama iz konzole možemo da pokrenemo neke operacije pomoću yarn-a dodavanjem reči run ispred određene skripte.

yarn run dev

Nakon prvog izvršavanja ove komande, na izlazu nećemo dobiti ništa i konzola će da nam ukaže na sledeću grešku.

Ova greška je sasvim očekivana i dešava se jer next koristi direktorijum pages i fajlove unutar tog direktorijuma kako bi pravio sam svoje putanje. U našem slučaju taj direktorijum ne postoji, pa moramo sami da ga napravimo u root direktorijumu našeg projekta. U taj direktorijum dodamo fajl index.js.

U ovom fajlu pišemo naš Next code, u ovom slučaju jednostavno pišemo jednu rečenicu “Hello Next.js, I love you!”.

const Index = () => (
   <div>
       <p>Hello Next.js, I love you!</p>
   </div>
)
export default Index

Ukoliko nakon toga pokrenemo našu aplikacju komandom “yarn run dev” kroz konzolu, dobićemo našu prvu, jednostavnu SSR aplikaciju na adresi http://localhost:3000/.

Dodavanje Express framework-a

Naravno, primer iznad nije sve što Next može da pruži. Za komplikovanije SSR aplikacije, next može da se koristi sa Express framework-om. Kako bi koristili Express, prvo moramo da ga ubacimo u naš projekat.

yarn add express

Potom kreiramo server.js fajl u root direktorijum našeg projekta i dodajemo sledeći sadržaj.

const express = require('express')
const next = require('next')
 
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
 
app.prepare()
.then(() => {
 const server = express()
 
 server.set('view engine', 'ejs')
 
 server.get('*', (req, res) => {
   return handle(req, res)
 })
 
 server.listen(3000, (err) => {
   if (err) throw err
   console.log('> Ready on http://localhost:3000')
 })
})
.catch((ex) => {
 console.error(ex.stack)
 process.exit(1)
})

Šta piše u kodu iznad? Prvo smo dodali Express i Next biblioteke. Postavili smo aplikaciju u “development” mod. Nakon toga smo je konačno pripremili i napravili određene putanje u Express framework-u. Takođe smo dodali “ejs” engine za prikazivanje fajlova i rekli smo serveru da se izvršava na portu 3000. U “catch” delu rukujemo određenim greškama i automatski izlazimo iz aplikacije ako do njih dođe.

Kako bi mogli da koristimo “ejs” engine za prikazivanje, moramo da dodamo i taj modul u projekat.

yarn add ejs

Ukoliko nakon izvršavanja “yarn run dev” komande, ukoliko dobijete sledeću grešku, jednostavno se rešava dodavanjem mime modula u projekat.

yarn add mime

Međutim, izvršavanjem “yarn run dev” komande i dalje se samo pokreće ona stara SSR aplikacija napisana samo pomoću Next biblioteke. Pošto želimo da se sada izvršava aplikacija pisana pomoću Express biblioteke, moramo da promenimo naš package.json fajl.

Umesto

"dev": "next"

pišemo

"dev": "node server.js"

Čist URL

Čist (clean) URL služi da sredi “query strings” u URL-u. Dosta je bitan za SEO optimizaciju, a pored toga omogućava korisnicima lakše snalaženje na sajtu.

URL	Čist URL
http://example.com/about.html	http://example.com/about
http://example.com/products?pid=25	http://example.com/products/25
http://example.com/p/index.php?cat=7&id=51	http://example.com/p/7/51

Za čiste URL-ove jednostavno koristimo Express.

server.get('/post/:title', function (req, res) {
   return app.render(req, res, '/post', { title: req.params.title})
})

Kako bi bili u mogućnosti da koristimo ovaj URL (npr. http://localhost:3000/post/TitleOfPost) neophodan nam je post.js u pages direktrojumu. Sadržaj tog fajla može da bude jednostavno prikazivanje naslova.

class Post extends React.Component {
   static async getInitialProps({query: {title}}) {
     console.log('TITLE', title)
     return { title }
   }
   render() {
     return <h1>This blog post title is: {this.props.title}</h1>
   }
}
export default Post

Pokretanjem aplikacije u development modu (yarn run dev) i posećivanjem određenih stranica sa “post” ispred, dinamički se menja sadržaj stranice.

 

Zaključak

SSR aplikacije polako postaju najzastupljenije na internetu. Korišćenjem Next i Express biblioteka mogu se napraviti veliki sistemi pomoću Javascript-a, pa je zato ovaj “stack” sve popularniji u development svetu. Dobra strana pisanja koda sa ovim bibliotekama je svakako to što koriste najpopularnije server i front-end framework-e, Nodejs i React.

Dodatak

Ukoliko iz nekog razloga niste uspeli da ispratite tok priče, primer možete pronaći na sledećem github linku.