- Create an API that exposes the data from the data you need
- Consume that API from your static site.
As others have mentioned, there are tools out there that help you in implementing the API fairly simply. The reason you shouldn't just connect to the database from the browser is primarily security - you should build your API to be a gatekeeper, and expose only the data you need to expose.
How you consume that is up to you. You may find you have some issues with things like CORS, depending on how you set this up - but these issues can usually be worked around.
[edit: Note that depending on why you want a static site, e.g. if bandwidth costs are your big limit and you don't want your API hit with every request, you might find that setting up an automated worker to scrape your data and deploy it makes life easier - assuming that all your visitors to a page will want access to exactly the same data. In fact, if you save it as JSON with a filename ending .js, prepend "window.page_content = " to your file as part of your worker, then you can load your database content at the top of your page in a simple script tag and use that data in the rest of your page.]
Comments
I think the correct answer to this is:
- Create an API that exposes the data from the data you need
- Consume that API from your static site.
As others have mentioned, there are tools out there that help you in implementing the API fairly simply. The reason you shouldn't just connect to the database from the browser is primarily security - you should build your API to be a gatekeeper, and expose only the data you need to expose.
How you consume that is up to you. You may find you have some issues with things like CORS, depending on how you set this up - but these issues can usually be worked around.
[edit: Note that depending on why you want a static site, e.g. if bandwidth costs are your big limit and you don't want your API hit with every request, you might find that setting up an automated worker to scrape your data and deploy it makes life easier - assuming that all your visitors to a page will want access to exactly the same data. In fact, if you save it as JSON with a filename ending .js, prepend "window.page_content = " to your file as part of your worker, then you can load your database content at the top of your page in a simple script tag and use that data in the rest of your page.]