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.
Advertisement
Answer
- 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.
- You can utilize AWS Lambda functions and get your first 1 million requests free.
- 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¶meter2=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
}
}