Skip to content

Static site, server side computation, Nextjs, WordPress

I want to create a mostly static site (and have been thinking about using Next.js), however it should include the possibility to get a price estimate based on customer specifications. This computation should be private and shouldn’t be revealed to anyone (otherwise I would have inserted plain js). I’m guessing I need to have something listening for requests on the server and give back some simple response (the price).

I am using Host-Europe’s Webbuilder pack and have ssh access. To set up WordPress (and be able to reach the setup main page), all I had to do, was copy over the files and assign the domain to the WordPress folder in Host-Europe’s admin panel.

So, my questions are:

  • Is adding this functionality easily achievable with a static website framework or is it advisable to just completely switch to some server-side rendering framework (such as WordPress, React, Django)
  • Do I need some process running in the background listening for requests? How would I call such a process to trigger some server-side function via JavaScript for example and obtain the result?
  • Why was it not required to start some demon process for WordPress to work? (I’m guessing Host-Europe might be involved in the background here?)

I would prefer to stick to either Node/JavaScript or Python if it comes down to using some framework, but anything that gets the job done quick for now would be great.

I have built my own static blog before and hosted it on github-pages, but I am a bit clueless when it comes to anything beyond that.

Answer

  1. Do calculations in JavaScript, load from an external source on your server and minify the js code to obfuscate it. Probably the easiest solution in my opinion.
  2. You can utilize AWS Lambda functions and get your first 1 million requests free.
  3. Create a simple REST API with Node.JS and Express JS.

Node.js Express.js API example

const express = require('express')
const app = express()
const port = 3000

app.get('/calculate-price', (req, res) => {
  response_price = req.query.parameter1 + req.query.parameter2
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ price: response_price }));
})

The Next JS fetch function

export async function getStaticProps(context) {
   const res = await fetch(`https:[your API or cloud function resource]?parameter1=abc&parameter2=1245`)
   const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
     props: { data }, // the price will be passed to the page component as props
   }
}