Is It Possible To Render Only Those Layers Inside Of Viewport?

Question

Since I have some "heavy" layers on the OpenLayers map it takes quite some time to load it. I am unsing TileWMS Source. When I zoom in to the specific area, everytime I have to wait for all layers to be loaded before I can normally interact with the map. Is there a way that ol only rerenders layers in the visible area of the map, aka that it doesnt enter prerender and postrender if its not in the view?

Answer 1

There is an option in layers called strategy. It's about how OpenLayers request for data from GeoServer. Default strategy is module:ol/loadingstrategy~all that requests for the whole layer.
But there is also another option for loading strategy called module:ol/loadingstrategy.bbox. By setting this value for strategy in the layer you can request for the current extent of the map. see here for OpenLayers example.

After setting bbox option to your layer you should change the loading function or layer URL. For example mention above you should set a function for source URL that loads only the current extent.

var vectorSource = new VectorSource({
  format: new GeoJSON(),
  url: function(extent) {
    return 'https://ahocevar.com/geoserver/wfs?service=WFS&' +
        'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
        'outputFormat=application/json&srsname=EPSG:3857&' +
        'bbox=' + extent.join(',') + ',EPSG:3857'; // giving current extent to load data
  },
  strategy: bboxStrategy // telling openlayers to not load all data!
});