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 } }